从 cellRendererFramework 向父级发出事件

使用 ag-grid，您可以定义您的GridOptions.columnDefs列信息包括cellRendererFramework。我有一个正在使用的组件cellRendererFramework其中包括通过单击其模板中的按钮触发的事件。我希望能够向父级发出此事件（其中定义了 columnDefs，并且ag-grid-angular是从）初始化的。

我明白我可以让事件继续下去ag-grid-angular's cellClicked事件...然后我可以查看事件来解析事件目标等信息，看看它是否在按钮上等等...但我希望我不必这样做，并且有一种从 获取事件的方法cellRendererFramework组件 ts，向上。

My GridOption.columnDefs此列的 def 如下所示：

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

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

我希望从ActionCellComponent to the AdminComponent其中主办ag-grid和columnDefs，而无需解析cellClicked event.

我在寻找一种干净的方法来执行此操作时遇到了问题。您可以使用它来获取对已初始化的父组件的引用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在父级中，您可以执行以下操作。

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

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

我希望这就是您正在寻找的。

Here is ag-grid 的文档 https://www.ag-grid.com/angular-more-details/#parent_child.