如何在AG Grid Angular中将自定义表头组件的值传递至父组件

步骤1：在Home组件的列定义中传递回调函数 #

由于AG Grid的自定义表头组件由框架渲染，无法直接通过@Output绑定事件，需在列定义的headerComponentParams中传入回调方法，用于接收选中的列名：

// Home 组件代码
import { Component } from '@angular/core';
import { ColDef } from 'ag-grid-community';
import { CustomHeader } from './custom-header.component';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent {
  columnDefs: ColDef[] = [];

  ngOnInit() {
    // 模拟动态生成列
    this.columnDefs = [
      { field: 'name', headerName: '姓名', headerComponent: CustomHeader, headerComponentParams: {
        onHeaderSelected: (headerName: string) => this.onHeaderSelected(headerName)
      }},
      { field: 'age', headerName: '年龄', headerComponent: CustomHeader, headerComponentParams: {
        onHeaderSelected: (headerName: string) => this.onHeaderSelected(headerName)
      }},
      // 其他动态列同理
    ];
  }

  // 接收选中列名的回调方法
  onHeaderSelected(headerName: string) {
    console.log('选中的列：', headerName);
    // 在这里执行后续操作逻辑
  }
}

步骤2：修改CustomHeader组件调用回调 #

去掉@Output，直接通过AG Grid传递的params调用回调函数，将选中值传回Home组件：

// CustomHeader 组件代码
import { Component } from '@angular/core';
import { IHeaderAngularComp, IHeaderParams } from 'ag-grid-angular';

@Component({
  selector: 'app-custom-header',
  templateUrl: './custom-header.component.html'
})
export class CustomHeader implements IHeaderAngularComp {
  public params!: IHeaderParams & { onHeaderSelected: (headerName: string) => void };

  onItemChange(event: Event) {
    const selectedHeader = (event.target as HTMLInputElement).value;
    // 调用Home组件传递的回调
    this.params.onHeaderSelected(selectedHeader);
  }

  agInit(params: IHeaderParams & { onHeaderSelected: (headerName: string) => void }): void {
    this.params = params;
  }

  refresh(params: IHeaderParams) {
    return false;
  }
}

步骤3：修复单选按钮ID重复问题 #

原模板中所有单选按钮的id相同，会导致DOM冲突，需改为唯一ID（比如结合列的colId）：

<!-- CustomHeader 组件模板 -->
<div>
  <input class="form-check-input"
    type="radio" name="headerRadios"
    id="customRadios-{{ params.colId }}"
    value="{{ params.displayName }}" (change)="onItemChange($event)"/>
  <label class="form-check-label"
    for="customRadios-{{ params.colId }}">
    {{ params.displayName }}
  </label>
</div>

这样修改后，当用户点击单选按钮时，选中的列名会通过回调函数传递到Home组件，即可执行后续操作。

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