Angular父组件无法捕获子组件事件问题排查

核心错误：事件名称不匹配 #

子组件通过@Output定义的事件发射器名称是notificaValore，但父组件模板中绑定的事件却是notificaEvento——两者名称完全不一致，导致父组件无法监听到子组件触发的事件。

修复方案（二选一即可） #

方案1：修改父组件模板的事件绑定名称

将父组件app.component.html中的事件绑定改为与子组件@Output一致的名称：

<app-figlio2 (notificaValore)="catturaEvento($event)"></app-figlio2>

方案2：修改子组件的@Output名称

如果希望保留父组件的notificaEvento绑定名称，需同步修改子组件figlio2.component.ts的@Output定义及发射逻辑：

varDaEmettere: number = 15;
@Output() notificaEvento = new EventEmitter<number>(); // 修改此处名称

notificaEvento(){
    alert("notifica evento " + this.varDaEmettere);
    this.notificaEvento.emit(this.varDaEmettere); // 同步修改发射的事件对象
}

解决类型错误问题 #

你提到将parametro设为number类型会报错，根源就是事件名称不匹配导致Angular无法正确推断$event的类型。修复事件名称后，即可将父组件方法的参数类型改为number，不会再出现类型错误：

catturaEvento(parametro: number){
    alert("cattura evento");
    this.valoreCatturato = parametro; // 现在可以正常赋值
}

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