Как сделать так, чтобы текст ячейки Ag-Grid (не вся ячейка) имел событие щелчка

Question

Я пытаюсь открыть компонент всякий раз, когда пользователь нажимает на текст в определенной ячейке (в данном случае в столбце «Имя»). Проблема, с которой я сталкиваюсь, заключается в том, что в 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();

Answer 1

Когда дело доходит до настройки средств визуализации ячеек для ag-Grid, вам необходимо использовать Component Renderer Cell .

Во-первых, в вашем 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]
})

Я раздвоил и создал demo из официальной демонстрации ag-grid.Вы можете обратиться к cube-renderer.component.ts для обработки события click.