Angular2-Ag网格-在单元格渲染器组件中获取父实例

Question

我正在使用Ag Grid在我的项目中显示项目列表。我已经用colDef为网格实现了Ag Grid，如下所示

custom.component.ts

CustomComponent

//列定义数组

[
             {
                headerName: "Actions", 
                field: "action", 
                width: 100,
                cellRendererFramework: ActionRendererComponent,
            },
]

ActionRendererComponent

import {Component} from '@angular/core';
import {AgRendererComponent} from 'ag-grid-ng2/main';

@Component({
    selector: 'action-cell',
    template: `
    <a href="javascript:" *ngIf="showEditLink" (click)="edit()">&nbsp;&nbsp;Edit</a>
    <a href="javascript:" *ngIf="showSaveLink" (click)="save()">&nbsp;&nbsp;Save</a>
    <a href="javascript:" *ngIf="showCancelLink" (click)="cancel()">Cancel</a>
    `
})

export class ActionRendererComponent implements AgRendererComponent {
 public edit(){
  ..some logic here
 }
 public save(){
  ..some logic here
 }
 public cancel(){
  ..some logic here
 }
}

现在的问题是，我无法访问ActionRenderer中任何函数的父实例CustomComponent，例如save（），edit（），cancel（）。如何将父实例传递给ActionRenderer组件？

Answer 1

在初始化网格时，请在父组件中确保在其构造函数中添加以下代码：

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

确保模板中包含gridOptions

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

确保遵循上述步骤。在单元格渲染器组件中，尝试记录参数。您应该能够获得this.params.context.componentParent。

进一步的参考：Ag-grid亲子