angular - 有什么方法可以将动态数据传递给 Angular 中的组件？

Question

我正在尝试将动态数据传递给子组件。但是我总是在子组件中得到未定义的数据。下面是我在做什么。

父组件.ts

results: any[];
ngOnInit() {
this.http.get('url').subscribe(data => this.results = data);
}

ParentComponent.html

<app-childComponent [dataNeeded]=results></app-childComponent>

子组件.ts

@Input('dataNeeded') dataNeeded: any[];
ngOnInit() {
 console.log(dataNeeded); //Always undefiend
}

所以正如预期的那样，它不等待异步调用并返回未定义的我。如何将动态数据传递给组件？

Answer 1

你可以试试 OnChanges生命周期钩子(Hook)方法。

在您的情况下，您需要像这样将它添加到您的子组件中:

ngOnChanges(changes) {
  if (changes['dataNeeded'] && this.dataNeeded) {
    console.log(this.dataNeeded);
  }
}

PS 此外，我刚刚注意到您的 ChildComponent.ts 中的语法错误，它缺少 this:

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