Question

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

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

我对此列的cellRendererFramework定义如下：

GridOption.columnDefs

{ headerName: 'Actions', cellRendererFramework: ActionCellComponent, suppressFilter: true, }有一个带有按钮的模板，这些按钮具有单击事件，例如ActionCellComponent，并在组件ts中被拾取。

我希望从(click)="actions.deleteSchema($event)"到托管ActionCellComponent和columnDefs的AdminComponent事件，而不必解析ag-grid事件。

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，则可以执行以下操作。

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

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

我希望这是您想要的。

这里是ag-grid's documentation。

将事件从cellRendererFramework发射到父对象

1 个答案: