Angular Check子组件已完成来自父组件的异步数据

Question

我有一个子组件，该子组件使用异步管道来格式化需要一些时间的数据。因此，我想从父组件检查子组件是否已完成加载。

在父组件中是否可以使用任何生命周期挂钩或其他策略来通知所有内容都已加载到子组件中。

Answer 1

您可以在父组件可以挂接使用的@Output()上使用EventEmitter装饰器。有关详细信息，请参见此处的文档：https://angular.io/guide/component-interaction

这是该文档中的示例代码。

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-voter',
  template: `
    <h4>{{name}}</h4>
    <button (click)="vote(true)"  [disabled]="didVote">Agree</button>
    <button (click)="vote(false)" [disabled]="didVote">Disagree</button>
  `
})
export class VoterComponent {
  @Input()  name: string;
  @Output() voted = new EventEmitter<boolean>();
  didVote = false;

  vote(agreed: boolean) {
    this.voted.emit(agreed);
    this.didVote = true;
  }
}