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

Question

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

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

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();

Answer 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

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

How to make Ag-Grid cell text (not entire cell) have a click event

typescript

ag-grid

angular