Question

组件A的内部构造函数中，我使用以下代码：

public visitors: any[] = [];
 this.eventsService.view(this.activatedRoute.snapshot.params['id']).subscribe(response => {
      this.event = response.data.event;
      this.visitors = response.data.event.visitors;
});

组件模板是：

<app-visitor-component [visitors]="visitors"></app-visitor-component>

为什么visitors组件中的变量app-visitor-component为空，尽管存在数据：

@Input() visitors: IVisitor[];
 constructor() {
     console.log(this.visitors); // returns []
 }

Answer 1

在ComponentA模板中，如果希望子组件中visitor的绑定值是visitor，最简单的操作就是*ngIf检查。

<app-visitor-component *ngIf="visitors.length" [visitors]="visitors"></app-visitor-component>

这将对visitors.length的值进行真实检查，直到服务调用返回一个值为止，该值将一直为false。

我还建议您将服务调用移至eventsService.view的{{1}}到ngOnInit并移出构造函数。这也使ComponentA的测试更加容易。

然后在ComponentA的子组件中

根据先前的答案@Input() value is always undefined

它将在app-visitor中初始化，而不是在构造函数中初始化。（请同时查看Angular Life Cycle Hooks documentation。）

您使用ngOnInit

的代码

OnInit

Answer 2

创建组件后，

角度不会使@Input数据可用。即constructor()期间不可用。

如果要在实际发送（并重新发送）@Input时退出，请使用NgOnChanges：

import { Component, Input, OnChanges } from @angular/core';
@Component({
    selector: 'app-foo',
})
export class FooComponent implements OnChanges {
    @Input() visitors: IVisitor[];
    ngOnChanges() {
        if (this.visitors) {
            console.log(this.visitors)
            // do something with this.visitors
        }
    }
}

或者，当Angular发送东西时，您也可以使用getter / setter来触发它：

    private _visitors: IVisitor[];
    @Input() public set visitors(val: IVisitor[]) {
        this._visitors = val;
    }
    // Also, guarantee to always return an array
    public get visitors(): IVisitor[] {
        if (this._visitors) {
            return this._visitors;
        }
        return [];
    }

为什么我无法从@input获取数据？

2 个答案: