观察子组件中的@Output事件发射器？

Question

如何在子组件中使用或观察父组件的 @Output() 事件发射器呢？

例如，在这个演示中，子组件像这样使用了 @Output onGreetingChange：

如果 onGreetingChange 在 AfterViewInit 生命周期钩子中发射，这将能够工作。

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

然而，这样做会产生一个 ExpressionChangedAfterItHasBeenCheckedError 错误。

有没有办法让其正常工作而不引发这个错误呢？

我尝试在 constructor 和 OnInit 中都进行发射。有什么想法吗？

Corralien · Answer

您可以手动触发 变更检测，使用 detectChanges() 方法。

我的猜测是因为这是改变 @Input 的非常规方式，变更检测可能错过了这些变化，所以我们需要手动运行它！

示例代码如下：

ngAfterViewInit() {
  this.onGreetingChange.emit('Hola');
  this.cdr.detectChanges();
}

这里，this.cdr.detectChanges() 是手动触发变更检测的关键步骤，以确保视图反映了数据的最新状态。

StackBlitz 示例提供了一个实际操作的环境来演示这一解决方案。

Dietrich Epp · Answer

您也可以选择使用 BehaviorSubject 替代 EventEmitter。这样做的好处在于可以设置初始值。请看以下示例：

StackBlitz 示例

主应用组件(App Component)

@Component({
  selector: 'app-root',
  imports: [AppChild, AppChildTwo, AsyncPipe],
  standalone: true,
  templateUrl: './app.component.html',
})
export class App implements OnInit, AfterViewInit {
  // 将 EventEmitter 替换为 BehaviorSubject，并设置初始值
  onGreetingChange = new BehaviorSubject('Hola!!');

  greetingTwo!: string;

  // 构造函数、ngOnInit 和 ngAfterViewInit 中不再需要 emit 事件
}

HTML 模板



  

{{ greetingTwo }}

子组件一(AppChild)

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: '{{ greeting }} Everyone!',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
})
export class AppChild {
  @Input() greeting!: string | null;
}

子组件二(AppChildTwo)

@Component({
  selector: 'app-greeting-two',
  standalone: true,
  template: 'AppChildTwo: {{ greetingTwo | async }} Everyone!',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  imports: [AsyncPipe],
})
export class AppChildTwo {
  // 这里同样使用 BehaviorSubject 并设置初始值
  @Output() greetingTwo = new BehaviorSubject('Initial greeting TWO');
}

Patrick · Answer

为了更好地避免 ExpressionChangedAfterItHasBeenCheckedError 错误并提升性能，推荐使用 ChangeDetectionStrategy.OnPush 策略。

示例代码如下：

@Component({
  selector: 'app-root',
  imports: [AppChild, AsyncPipe],
  standalone: true,
  // 添加 ChangeDetectionStrategy.OnPush 策略
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    
  `,
})
export class App implements OnInit, AfterViewInit { 
  @Output()
  onGreetingChange = new EventEmitter();

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

代码示例

rzwitserloot · Answer

根据 GitHub 问题讨论，在本场景中信号（Signals）也同样适用。

示例代码片段如下：

onGreetingChangeSignal = toSignal(this.onGreetingChange, {
  initialValue: null,
});

并且在模板中这样使用：

在线示例