Question

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

custom.component.ts

CustomComponent

// colum definition array

[
             {
                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
 }
}

现在问题是我无法访问父实例CustomComponent 在 ActionRenderer 中的任何函数中，如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 parent-child

Answer 2

尝试在ActionRendererComponent中使用 this.params.context.componentParent 。请参阅给定here

的child-message.component的源代码

问候。

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

2 个答案: