Angular14+AgGrid v28：如何为单元格添加点击触发方法？

先明确你之前代码的问题：

1. 第一种写法只配置了cellRendererParams但未指定对应渲染器，默认文本渲染器不会识别onClick参数；
2. 第二种写法用了Angular模板语法(click)，但AgGrid动态生成的原生DOM不会被Angular编译，指令无法生效。

以下是三种可行的修正方案，按需选择：

方案一：利用表格cellClicked事件（最简单） #

无需自定义渲染器，直接监听表格单元格点击事件，判断列后触发方法：

1. 模板中绑定事件：

<ag-grid-angular
  [columnDefs]="columnDefs"
  [rowData]="rowData"
  (cellClicked)="onCellClicked($event)"
  <!-- 其他配置 -->
></ag-grid-angular>

2. 组件类中实现逻辑：

onCellClicked(event: CellClickedEvent) {
  // 判断点击的是Details列
  if (event.colDef.field === 'partDescription') {
    // 可传递当前行数据到方法
    this.showPartsHierarchcy(event.data);
  }
}

showPartsHierarchcy(rowData?: any) {
  // 你的业务逻辑
  console.log('触发层级方法', rowData);
}

方案二：自定义Angular单元格渲染器（灵活可控） #

适合需要自定义样式或交互的场景：

1. 创建渲染器组件PartDetailsRendererComponent：

import { Component } from '@angular/core';
import { ICellRendererAngularComp, ICellRendererParams } from 'ag-grid-angular';

@Component({
  template: `<span style="cursor: pointer;" (click)="handleClick()">{{ params.value }}</span>`
})
export class PartDetailsRendererComponent implements ICellRendererAngularComp {
  params!: ICellRendererParams;

  agInit(params: ICellRendererParams): void {
    this.params = params;
  }

  refresh(params: ICellRendererParams): boolean {
    this.params = params;
    return true;
  }

  handleClick() {
    // 通过context调用父组件方法
    (this.params.context as any).showPartsHierarchcy(this.params.data);
  }
}

2. 父组件中配置表格：

import { PartDetailsRendererComponent } from './part-details-renderer.component';

export class YourComponent {
  // 注册自定义渲染器
  frameworkComponents = {
    partDetailsRenderer: PartDetailsRendererComponent
  };

  columnDefs = [
    {...},
    {
      headerName: 'Details',
      field: 'partDescription',
      filter: false,
      minWidth: 50,
      cellRenderer: 'partDetailsRenderer',
      // 传递父组件方法到渲染器
      cellRendererParams: {
        context: { showPartsHierarchcy: this.showPartsHierarchcy.bind(this) }
      }
    }
  ];

  showPartsHierarchcy(rowData: any) {
    // 业务逻辑
  }
}

3. 在模块中声明该组件：

@NgModule({
  declarations: [YourComponent, PartDetailsRendererComponent],
  // Angular 14+ 无需entryComponents
})
export class YourModule {}

方案三：原生JS绑定点击事件（轻量快捷） #

直接在cellRenderer中生成带点击事件的DOM元素：

columnDefs = [
  {...},
  {
    headerName: 'Details',
    field: 'partDescription',
    filter: false,
    minWidth: 50,
    cellRenderer: (params: ICellRendererParams) => {
      const span = document.createElement('span');
      span.textContent = params.value;
      span.style.cursor = 'pointer';
      // 绑定点击事件并传递行数据
      span.onclick = () => {
        (params.context as any).showPartsHierarchcy(params.data);
      };
      return span;
    },
    cellRendererParams: {
      context: { showPartsHierarchcy: this.showPartsHierarchcy.bind(this) }
    }
  }
];

showPartsHierarchcy(rowData: any) {
  // 业务逻辑
}

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