angular - 从 cellRendererFramework 向父级发送事件

Question

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

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

我的 GridOption.columnDefs此列的 def 如下所示:

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

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

我希望从 ActionCellComponent 获得事件到AdminComponent托管ag-grid和 columnDefs 而无需解析 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上课时会着火。

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在 parent 中，您可以执行以下操作。

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

然后，这应该允许您根据需要在两者之间进行交互。上下文是绑定(bind)的。

我希望这就是你要找的。

这里是 ag-grid's documentation .