Angular中如何将自定义组件内mat-checkbox的change事件暴露给父组件

第一步：修改子组件（CheckboxFilterComponent）逻辑 #

首先在组件类中引入输出事件需要的依赖：

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

完善组件类逻辑，新增对外输出事件和触发逻辑：

export class CheckboxFilterComponent extends FilterComponent {
  // 对外输出的变更事件，会抛出最新的过滤器状态
  @Output() filterChange = new EventEmitter<FilterState>();

  constructor() {
    super();
  }

  getState(): FilterState {
    return {
      name: this.name,
      value: this.values
        .filter((value) => value.active)
        .map((value) => value.value),
    };
  }

  // 模板中已绑定的ngModelChange触发方法，在这里对外抛出变更事件
  emitState() {
    const latestFilterState = this.getState();
    this.filterChange.emit(latestFilterState);
    // 如果父类FilterComponent原有emitState逻辑，保留调用即可：super.emitState()
  }
}

原组件模板代码无需修改，已经存在(ngModelChange)="emitState()"的触发绑定。

第二步：父组件（search-page）绑定监听事件 #

修改父组件模板中组件调用代码，绑定新增的filterChange事件：

<my-checkbox-filter 
  name="checkbox" 
  [values]="checkBoxValues"
  (filterChange)="isChange($event)"
></my-checkbox-filter>

完善父组件的监听方法，接收的参数即为当前过滤器的最新状态：

// 入参state包含当前过滤器的name和已选中的value数组
isChange(state: FilterState) {
  console.log("filter is changed", state)
} 

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