Angular子组件@Output EventEmitter emit触发父组件方法不生效问题

你的代码存在3个核心语法错误，按以下步骤修正即可正常运行：

错误点说明 #

• 事件绑定语法错误：Angular中@Output()输出事件需要使用圆括号()做事件绑定，你写的方括号[]是@Input()输入属性的绑定语法，根本没有绑定到子组件派发的事件上。
• emit()方法传参规则错误：EventEmitter的emit()方法仅支持传入1个参数，直接传2个参数时第二个参数会被直接丢弃，无法传递到父组件。
• 错误接收emit()返回值：emit()方法没有返回值，调用后固定返回undefined，你写var res = this.analyze.emit(...)后再遍历res.length会直接触发空值报错，这是运行时报错的直接原因。

正确实现代码 #

1. 子组件代码 #

传多参时统一包裹为对象传递，不要接收emit()的返回值：

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  // 定义输出事件，指定传参类型
  @Output() analyze = new EventEmitter<{param1: string, param2: any}>();

  // 业务逻辑中触发事件
  handleAction() {
    for(let i = 0; i < template.length; i++) {
      const formatTemplate = template[i].replace(/_/g, ' ');
      // 以对象形式传参，不要接收emit返回值
      this.analyze.emit({
        param1: formatTemplate,
        param2: ans[i]
      });
    }
  }
}

2. 父组件模板 #

使用圆括号绑定事件，通过内置的$event变量接收子组件传递的参数：

<!-- 注意是(analyze)不是[analyze] -->
<app-child (analyze)="handleAnalyze($event)"></app-child>

3. 父组件事件处理方法 #

接收单个事件对象后解构获取需要的参数，遍历逻辑中用到的res变量需要按业务逻辑自行赋值，不要使用emit()的返回值：

export class ParentComponent {
  handleAnalyze(event: {param1: string, param2: any}) {
    // 解构拿到两个参数
    const { param1, param2 } = event;
    
    // res按自身业务逻辑赋值，不要从emit返回值取
    const res = []; // 替换为实际业务数据
    for(let k = 0; k < res.length; k++) {
      // 原有遍历逻辑
    }
  }
}

补充注意 #

• Angular官方推荐多参传递时统一封装为对象，不支持emit()直接传入多个参数，不要尝试修改EventEmitter原型实现多参传递，会导致后续升级兼容性问题。
• 牢记Angular模板绑定规则：方括号[]绑定输入属性（父传子），圆括号()绑定输出事件（子传父），两者不要混用。

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