Question

应用程序的一个特定组件不会绑定我传递的任何输入。

我的组件

@Component({
    selector : 'default-actions',
    templateUrl : './default.actions.template.html',
    styleUrls: [ './default.actions.style.scss' ],
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DefaultActionsComponent
{
    protected entityId;
    protected uuid = UUID.UUID();
    protected extraForms;

    @Input() protected data;
    @Input() protected structure;
    @Input() protected targetId;
    @Input() protected table;
    @Input() protected row;
    @Input() protected modal: ModalDirective;
    @Input() protected entity;
    @Input() protected entityObject: Entity;
    @Input() protected parentWrapper;
    @Input() protected foo;

    constructor(
        protected translate: TranslateService,
        protected activatedRoute: ActivatedRoute,
        protected actionService: DefaultActionsService,
        protected router: Router,
        protected entityService: EntityService,
        protected http: HttpAuthenticationService
    ) {}

    public ngOnInit() {
        console.log(this.foo);
    }

我在这里使用它：

<default-actions
    [table]="table['defaultListingTableComponent']"
    [row]="row"
    [foo]="'bar'"
    [modal]="modal"
    [structure]="availableColumns"
    [entityObject]="entityObject"
    [targetId]="selectedRows()">
</default-actions>

我添加了foo输入以进行一些调试。在控制台中，行console.log(this.foo);输出undefined。其他所有输入也一样。

我相信该组件本身存在问题，但是我找不到它。我的应用程序的其他组件正在运行。

Answer 1

编辑：

我刚刚在Stackblitz上做了一个样本：https://stackblitz.com/edit/angular-qrgy7k

提示：

而不是像[foo] =“'bar'”那样直接传递字符串，而是父组件中的变量，然后将其作为[foo] = “ yourVariable”

父组件HTML：

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<app-demo
[mydata]="datatopass"
>  
</app-demo>

父项TS：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  datatopass = "sad";
}

子组件HTML：

<p>
demo works!
</p>
<div>
  Data: {{ mydata }}
</div>

子组件TS：

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {

  @Input() mydata;

  constructor() { }

  ngOnInit() {
    console.log(this.mydata);
  }

}

ngOnInit()将在初始化组件时运行，并且此时绑定的属性可能不包含来自父组件的数据。尝试ngOnChanges()，ngAfterViewInit()

要解决的方法是使用Observable和Subject。

Answer 2

您可能应该实现OnInit接口以使其工作？你可以试试吗？

Answer 3

如@Yash ngOnInit所述，是正确的位置但是您可以在其中添加ngOnChanges并添加console.log，它一开始可能是未定义的，但是只要输入发生更改，它就可以在以后随时获得值

ngOnChanges() {
console.log(this.foo)
}

Answer 4

您是否尝试过使用Observables？据我所知，当您的输入传递到该子组件时，它的输入可能仍然是不确定的。如果您不习惯@Input的工作原理，可能会觉得有些奇怪。

Answer 5

您可以尝试实现 AfterViewChecked ，并查看在 ngAfterViewChecked 中是否有价值，如下所示：

@Component({
    selector : 'default-actions',
    templateUrl : './default.actions.template.html',
    styleUrls: [ './default.actions.style.scss' ],
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DefaultActionsComponent implements AfterViewChecked
{
    protected entityId;
    protected uuid = UUID.UUID();
    protected extraForms;

    @Input() protected data;
    @Input() protected structure;
    @Input() protected targetId;
    @Input() protected table;
    @Input() protected row;
    @Input() protected modal: ModalDirective;
    @Input() protected entity;
    @Input() protected entityObject: Entity;
    @Input() protected parentWrapper;
    @Input() protected foo;

    constructor(
        protected translate: TranslateService,
        protected activatedRoute: ActivatedRoute,
        protected actionService: DefaultActionsService,
        protected router: Router,
        protected entityService: EntityService,
        protected http: HttpAuthenticationService
    ) {}

    public ngOnInit() {
        console.log(this.foo);
    }

    ngAfterViewChecked() {
      console.log(this.foo);
    }

Answer 6

由于使用ChangeDetectionStrategy.onPush而生成的未定义输出

OnPush通过比较组件输入的引用来工作。因此，在您的情况下，对象引用始终相同。因此OnPush变更检测器未触发。

您可以参考此网址以获取更多说明：https://blog.angular-university.io/onpush-change-detection-how-it-works/

角分量输入始终返回未定义

6 个答案: