ngOnInit 中未定义角度异步输入？

我有一个父组件通过 API 将数据传递给子组件，如下所示：

.ts

private loadData() {
    this.data = this.apiService.getData();
}

.html

<child [data]="data | async"></child>

然后我有一个子组件，它接受输入数据并尝试显示/处理它，如下所示：

export class Child implements OnInit {

  private _data: Data[];

  @Input()
  set data(value: Data[]) {
    this._data = value;
  }

  get data(): Data[] {
    return this._data;
  }

  constructor() {
  }

  ngOnInit() {
    this.processData();
  }

  private processData() {
    const data = this.data; // this is undefined
    // Do processing here
  }
}

我知道这是因为数据是异步的，当它调用 ngOnInit 时，数据尚未到达该组件，但如何在 init 上加载数据或至少在异步完成时更新它？

我正在考虑多种选择。

第一个选项是仅在 API 调用解析时创建子组件。

Example:

<ng-content *ngIf="(data | async) as loadedData">
    <child [data]="loadedData"></child>
</ng-content> 

另一种选择是聆听@Input你的子组件的变化ngOnChanges:

子组件.ts

@Input() data: Data[];

ngOnChanges(changes: SimpleChanges){
    // If changes.data is set the data input has changed
    if (changes.data) {
        this.processData();
    }
}

The SimpleChanges是变化的哈希表。看ngOnChanges https://angular.io/api/core/OnChanges#ngOnChanges and 简单的改变 https://angular.io/api/core/SimpleChanges了解更多信息 ;-）

我认为最后一个选项如下：

子组件.ts

@Input()
set data(value: Data[]) {
  this._data = value;
  this.processData(); 
}

使用最后一个选项，您将在每次调用设置器时处理数据。这与第二种选择没有太大区别。

我建议您使用最后一个选项，因为您不需要做太多改变;-)