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 {
  // ...
}