ngOnInit 中未定義 Angular 異步輸入？

Question

我有一個父組件將數據從 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 上加載數據或至少在異步完成時更新它？

Answer 1

我正在考慮多種選擇。

第一個選項是僅在 API 調用解決時才創建子組件。

例子：

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

另一種選擇是使用ngOnChanges監聽子組件中的@Input更改：

child.component.ts

@Input() data: Data[];

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

SimpleChanges是更改的哈希表。 有關更多信息，請參閱ngOnChanges和SimpleChanges ；-)

我認為最后一個選項如下：

child.component.ts

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

使用最后一個選項，您將在每次調用 setter 時處理數據。 它與第二種選擇沒有太大區別。

我建議你最后一個選項，因為你不需要改變很多;-)

Answer 2

我知道這已經得到解答，但我想指出ngOnChanges 。

SimpleChanges有非常酷的 props，比如previousValue和currentValue ，所以你可以做這樣的事情：

ngOnChanges(changes: SimpleChanges) {
  const { myExpectedProp } = changes;
  if (myExpectedProp.previousValue !== myExpectedProp.currentValue) {
    this.doSomething();
  }
}

是不是很棒？ 如果您不使用async pipe，這非常方便。

不要忘記實現接口：

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

export class YourComponent implements OnInit, OnChanges {
  // ...
}