Angular 11中子组件EventEmitter触发后父组件绑定方法未调用问题

• 第一步：检查EventEmitter导入来源
  这是高频出错场景，确认子组件conversation-card.component.ts中是从@angular/core导入的Output和EventEmitter，不要误引入Node.js或其他第三方包的同名类：

  // 正确导入示例
  import { Component, Output, EventEmitter } from '@angular/core';
  

• 第二步：校验事件名大小写匹配
  Angular事件绑定大小写敏感，确认模板中绑定的事件名(badgeAwarded)和子组件@Output()定义的变量名完全一致，避免出现大小写拼写错误。
• 第三步：确认触发emit的子组件实例和绑定事件的是同一个
  如果页面用*ngFor渲染了多个<app-conversation-card>，或者搭配*ngIf做了条件渲染，可能出现你触发emit的实例，根本没有绑定awardBadges方法。可以在子组件的ngOnInit和ngOnDestroy生命周期中打日志，确认实例的创建销毁逻辑符合预期。
• 第四步：排查变更检测策略影响
  如果父子组件任意一方设置了changeDetection: ChangeDetectionStrategy.OnPush，异步回调中的emit可能因为没有触发变更检测导致事件未传递。可以临时把变更检测策略改为Default测试是否恢复正常，也可以在子组件emit前注入ChangeDetectorRef调用markForCheck()：

  // 子组件加入变更检测标记
  constructor(private cdr: ChangeDetectorRef) {}
  // emit前调用
  this.cdr.markForCheck();
  this.badgeAwarded.emit(true);
  

• 第五步：排查回调执行中断问题
  在this.badgeAwarded.emit(true)前打日志确认该行确实执行，同时在父组件awardBadges方法第一行加debugger断点测试，排除console.log被屏蔽、方法执行报错未打印等特殊情况。
• 第六步：检查子组件是否存在同名属性覆盖
  确认子组件内没有其他同名的badgeAwarded属性/方法覆盖了@Output()定义的EventEmitter实例。

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