如何在子组件中使用/监听父组件的@Output事件发射器？

首先明确：@Output本质是子组件向父组件传事件的机制，但你这里是把父组件的EventEmitter通过async管道转成数据流，传给子组件的输入属性。出现ExpressionChangedAfterItHasBeenCheckedError，是因为Angular完成当前变更检测周期后，你又在ngAfterViewInit里修改了绑定值，打破了检测顺序。

给你几个无错误的实现方式：

方法1：用setTimeout延迟发射事件 #

把emit操作放到setTimeout里，让它在当前变更检测周期结束后执行：

ngAfterViewInit() {
  setTimeout(() => {
    this.onGreetingChange.emit('Hola');
  });
}

这种方式最简单，利用setTimeout把任务推到下一个宏任务队列，等当前检测完成后再更新值。

方法2：手动触发变更检测 #

注入ChangeDetectorRef，在emit后手动通知Angular重新检测：

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

constructor(private cdr: ChangeDetectorRef) {}

ngAfterViewInit() {
  this.onGreetingChange.emit('Hola');
  this.cdr.detectChanges(); // 手动触发变更检测
}

这样Angular会立刻重新检测组件树，避免报错。

方法3：改用BehaviorSubject替代EventEmitter #

既然用async管道订阅数据流，直接用RxJS的BehaviorSubject更合适——它支持设置初始值，不用在生命周期里手动emit：

import { BehaviorSubject } from 'rxjs';

// 替换原@Output为BehaviorSubject
greetingSubject = new BehaviorSubject<string>('');

ngOnInit() {
  this.greetingSubject.next('Hola'); // 这里发射不会报错
}

模板里对应修改：

<app-greeting [greeting]="greetingSubject | async"></app-greeting>

这种方式更符合数据流理念，从根源上避开了检测时机问题。

额外提醒 #

不要在constructor或ngOnInit里直接用EventEmitter给子组件输入绑定emit值，此时子组件视图还未初始化，绑定可能未生效。上面三种方法都能避开这个问题，同时不会触发变更检测错误。

内容的提问来源于stack exchange，提问作者Ole