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

【问题标题】：Angular2 - Ag Grid - Get Parent Instance in Cell Renderer ComponentAngular2 - Ag Grid - 在单元格渲染器组件中获取父实例
【发布时间】：2017-05-19 22:22:43
【问题描述】：

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

custom.component.ts

自定义组件

//列定义数组

[
             {
                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 组件？

【问题讨论】：

我也遇到了同样的问题，你运气好了吗？

标签： angular typescript ag-grid

【解决方案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

【讨论】：

【解决方案2】：

做这些

将context: { componentParent: this } 属性添加到gridOptions
在ActionRendererComponent 中使用this.params.context.componentParent

参考给定here的child-message.component源代码

问候。

【讨论】：

@mkl 他在给出答案，链接仅供参考。
@NahuelIanni 仅第一句话就可以作为“这是评论，而不是答案”的候选者。
@mkl 不符合this
@NahuelIanni 那个元答案（结合对它的投票）确实表明，根据多数共识，这样的答案应该被视为答案。尽管如此，应该改进答案以提高一般用途。
@mkl 是的，我同意 :)