Angular父组件无法接收子组件EventEmitter事件的问题排查

问题根源：模板语法错误 #

你在父组件AddCustomerToClassComponent中使用<customer-add-form>时，错误地将事件绑定写在了组件标签的闭合标签之外，导致所有@Output事件绑定完全失效——这就是handleTest方法和内联console.log都没触发的核心原因。

错误的父组件模板代码：

<customer-add-form #customerForm>
        (addExistingCustomer)="handleAddExistingCustomer($event)"
        (addNewCustomer)="handleAddNewCustomer($event)"
        (testFunc)="handleTest($event); console.log('Parent template capturing event:', $event)" >
</customer-add-form>

修正方案 #

所有组件的输入、输出绑定都必须写在起始标签内部，不能放在起始标签与闭合标签之间的内容区域。修正后的父组件模板代码：

<customer-add-form 
  #customerForm
  (addExistingCustomer)="handleAddExistingCustomer($event)"
  (addNewCustomer)="handleAddNewCustomer($event)"
  (testFunc)="handleTest($event); console.log('Parent template capturing event:', $event)"
></customer-add-form>

子组件代码验证 #

你的子组件CustomerAddFormComponent事件触发逻辑是正确的，无需修改：

<button (click)="testEmit()">test</button>

@Output() testFunc = new EventEmitter();
testEmit(): void {
    console.log('Child emitting testFunc event:', 'test');
    this.testFunc.emit('test');
}

额外排查项（若修正后仍有问题） #

• 确认子组件已在父组件所在模块中正确声明或导入
• 检查父组件的handleTest方法是否属于当前组件实例（比如未被误定义为私有方法，或未在组件类外部定义）

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