如何使 Ag-Grid 单元格文本（不是整个单元格）具有单击事件答案

【问题标题】：How to make Ag-Grid cell text (not entire cell) have a click event如何使 Ag-Grid 单元格文本（不是整个单元格）具有单击事件
【发布时间】：2019-10-09 11:41:08
【问题描述】：

每当用户单击特定单元格中的文本时（在本例中为“名称”列），我都会尝试打开一个组件。我遇到的问题是 Ag-Grid 中没有任何方法（据我所知）允许这样做。我相信有一种方法可以为特定单元格添加点击事件，但我试图让它只捕获点击单元格文本时的事件。有谁知道我如何做到这一点？

我尝试了很多 Ag-Grid 方法，但没有一个有单元格文本点击事件。

this.gridOptions.api.setColumnDefs([{
    headerName: "Name",
    field: "Name"
  },
  {
    headerName: "Description",
    field: "Description"
  },
  {
    headerName: "Actions",
    cellRendererFramework: ActionsRoleComponent,
    autoHeight: false,
    cellClass: 'actions-button-cell d-flex align-items-center justify-content-center',
    width: 80,
    pinned: 'right',
    suppressResize: true,
    suppressFilter: true,
    suppressSorting: true,
    suppressMovable: true,
    cellEditorFramework: ActionsRoleComponent
  }
]);
this.gridOptions.api.setRowData(receivedJson);
this.gridOptions.api.sizeColumnsToFit();

【问题讨论】：

点击事件是否适用于名称列中的所有单元格？

标签： angular typescript ag-grid

【解决方案1】：

在为 ag-Grid 自定义单元格渲染器时，您需要使用 Cell Renderer Componenta。

首先，在您的 component.html 中，包含 frameworkComponents 的输入绑定

<ag-grid-angular
    #agGrid
    style="width: 100%; height: 100%;"
    id="myGrid"
    class="ag-theme-balham"
    [columnDefs]="columnDefs"
    [frameworkComponents]="frameworkComponents"
    (gridReady)="onGridReady($event)"
    .
    .
  ></ag-grid-angular>

在使用和生成 ag-grid 的主要组件上，您需要导入自定义单元格组件，定义 frameworkComponents 的属性，然后为您的特定列提供 cellRenderer 的值列定义：

import { NameRenderer } from "./name-renderer.component";

this.columnDefs = [
  {
    headerName: "Name",
    field: "name",
    cellRenderer: "nameRenderer",
  },
  // other columns
]

this.frameworkComponents = {
  nameRenderer: NameRenderer,
};

在您的自定义单元格渲染器组件NameRenderer 上，您绑定click 事件。我不确定您需要单元格的哪个部分使其可点击，但我假设您希望整个 name 处理点击事件

import {Component} from "@angular/core";
import {ICellRendererAngularComp} from "ag-grid-angular";

@Component({
  selector: 'name-cell',
  template: `<span (click)="onClick($event)">{{ params.value }}</span>`
})

export class NameRenderer implements ICellRendererAngularComp {

  // other parts of the component

  onClick(event) {
    console.log(event);
    // handle the rest
  }

}

不要忘记在你的 module.ts 中包含自定义单元格渲染器组件，

import { NameRenderer } from "./name-renderer.component";

@NgModule({
  imports: [
    AgGridModule.withComponents([NameRenderer])
    // other imported stuff
  ],
  declarations: [
    NameRenderer,
    // other components
  ],
  bootstrap: [AppComponent]
})

我已经从官方 ag-grid 演示中分叉并创建了一个 demo。点击事件的处理可以参考cube-renderer.component.ts。

【讨论】：