从 cellRendererFramework 向父级发出事件

Question

使用 ag-grid，您可以使用包含 cellRendererFramework 的列信息定义 GridOptions.columnDefs。我有一个用于 cellRendererFramework 的组件，其中包含一个通过单击其模板中的按钮触发的事件。我希望能够将此事件发送给父级（定义 columnDefs 的位置，以及初始化 ag-grid-angular 的位置）。

我可以看到我可以让事件通过 ag-grid-angular 的 cellClicked 事件...然后我可以查看事件以解析事件目标等信息，看看它是否在按钮上等等...但我希望我不必这样做，并且有一种方法可以从 cellRendererFramework 组件 ts 获取事件，up.

我对该专栏的 GridOption.columnDefs def 如下所示：

{
  headerName: 'Actions',
  cellRendererFramework: ActionCellComponent,
  suppressFilter: true,
}

ActionCellComponent 有一个带有点击事件的按钮模板，比如 (click)="actions.deleteSchema($event)" 并在组件 ts 中被拾取。

我希望获得从 ActionCellComponent 到托管 ag-grid 和 columnDefs 的 AdminComponent 的事件，而不必解析 cellClicked 事件。

Answer 1

我在寻找一种干净的方法来执行此操作时遇到了问题。您可以使用它来获取对已初始化 cellRenderer.

的父组件的引用

import {GridOptions} from "ag-grid";
constructor(){ 
    this.gridOptions = <GridOptions>{
        context: {
            componentParent: this
        }
    };
}

在HTML

中绘制网格时确保

<ag-grid-angular #grid-reference [gridOptions]="gridOptions">

然后在你的 cellRenderer 中包含 agInit ，它会在 class 被绘制时触发。

public params;

public agInit(params: any): void {
    this.params = params;

    console.log(this.params.context.componentParent); 
    // access to parent functions / variables etc
}

那么例如在事件发生后，如果您在父级中有 public hello: string，您可以执行以下操作。

this.params.context.componentParent.hello = "hi"; // could be function call.

这应该允许您根据需要在两者之间进行交互。上下文已绑定。

希望这就是您要找的。

这里是ag-grid's documentation.

从 cellRendererFramework 向父级发出事件

Emit Event from cellRendererFramework to parent

ag-grid

angular

ag-grid-angular