Angular 2父组件无法接收子组件EventEmitter发射的对象

以下是几个关键排查点，按优先级排序：

1. 方法名拼写错误 #

子组件中定义的事件处理方法名是criteraOnChange（少了字母i），如果子组件HTML模板中绑定的是正确的criteriaOnChange，会导致方法根本没被调用，自然不会触发事件发射。

修正方法：把方法名改成正确的criteriaOnChange：

// 修正拼写错误
criteriaOnChange(e: any) {
  // 原有逻辑保持不变
}

2. 子组件HTML模板的事件绑定检查 #

确认子组件的下拉框/输入控件是否正确绑定了修正后的方法，示例如下：

<!-- 确保(change)事件绑定了正确的方法名 -->
<select id="quarters" (change)="criteriaOnChange($event)">
  <!-- 选项内容 -->
</select>
<select id="years" (change)="criteriaOnChange($event)">
  <!-- 选项内容 -->
</select>
<select id="companies" (change)="criteriaOnChange($event)">
  <!-- 选项内容 -->
</select>

3. 类型不匹配导致的条件拦截 #

你的criteria对象属性是数字类型（初始值0），但下拉框的e.target.value返回的是字符串类型。当用户选择值后，this.criteria.quarter会被赋值为字符串，此时判断this.criteria.quarter == 0时，若用户选择的是值为"0"的选项，"0" == 0会返回true，导致条件拦截，无法触发事件发射。

修正方法：将赋值时转为数字类型：

// 赋值时转为数字
switch (field) {
  case 'quarters': this.criteria.quarter = Number(value);
    break;
  case 'years': this.criteria.year = Number(value);
    break;
  case 'companies': this.criteria.company = Number(value);
    break;
}

4. 子组件初始化问题 #

检查子组件的ngOnInit方法是否初始化了years数组，否则年份下拉框可能没有选项，用户无法完成所有条件选择：

ngOnInit(): void {
  this.years = this.getYearsList();
  // 如果facilities也是下拉框的数据源，也要确保这里初始化
}

5. @Output的规范配置 #

虽然不是必须，但建议给EventEmitter指定泛型，提升类型安全性：

@Output() criteriaEvent = new EventEmitter<{quarter: number, year: number, company: number}>();

完成以上排查后，重新运行项目，当三个条件都选择有效值时，父组件的onChangeCriteria方法应该能正常接收到子组件发射的对象。

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