Angular2-Ag网格-在单元格渲染器组件中获取父实例 [英] Angular2 - Ag Grid - Get Parent Instance in Cell Renderer Component

问题描述

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

I am using Ag Grid for displaying a list of items in my Project. I have implemented Ag Grid with colDef for grid as like below

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

现在的问题是我无法在任何以下位置访问父实例CustomComponent
ActionRenderer 中的功能，例如save（），edit（），cancel（）。
如何将父实例传递到 ActionRenderer 组件？

Now the issue is i cannot get access to parent instance CustomComponent in any of the functions in ActionRenderer like save(), edit(), cancel(). How can i pass parent instance into ActionRenderer component?

推荐答案

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

In your parent component while initializing the grid make sure you add following code in its constructor:

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

在模板中，请确保您包含gridOptions

In your template make sure you include gridOptions

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

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

Make sure you follow steps above. In your cell renderer component, try logging the params. You should be able to get this.params.context.componentParent.

有关更多参考： Ag-grid亲子

这篇关于Angular2-Ag网格-在单元格渲染器组件中获取父实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！