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

Question

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

父组件.ts

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

父组件.html

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

子组件.ts

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

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

Answer 1

您可以尝试OnChanges生命周期挂钩方法。

在您的情况下，您需要将其添加到您的子组件中，如下所示：

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

PS另外我刚刚注意到你的语法错误ChildComponent.ts，它丢失了this：

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

Answer 2

问题在于，UI 线程将在可观察对象的订阅完成之前渲染子组件。

你需要这样做：

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

constructor(private ref: ChangeDetectorRef) {}
ngOnInit() {
   this.http.get('url').subscribe(data => { 
     this.results = data;
     this.ref.markForCheck();
   });
}

在 HTML 中，您必须首先测试该值。

<ng-container *ngIf="results != null">
    <app-childComponent [dataNeeded]=results></app-childComponent>
</ng-container>

稍微描述一下，.markForCheck()订阅后会刷新结果，并通知所有使用此“值”的组件来更新其值，包括 ng-container。容器现在允许渲染子组件，这将保证当子组件经历其生命周期时结果不为空。