在 Angular 5 ag-grid 数据表中使用 cellRendererFramework答案

【问题标题】：Using cellRendererFramework in Angular 5 ag-grid data table在 Angular 5 ag-grid 数据表中使用 cellRendererFramework
【发布时间】：2018-10-12 03:59:29
【问题描述】：

我正在用 Angular 5 构建一个应用程序。在我的 HTML 页面中，我有一个表格，其中显示了正在查询的数据。此数据使用指令显示在 ag-grid 中。网格中的一列显示为 HTML 链接。我正在使用 cellRendererFramework 功能将列中的值显示为链接。它工作正常，并在表格中为每一行显示该列的值的链接。我的要求是我想将附加参数从主组件类传递给 cellRendererFramework 组件。我需要这样做的原因是，当单击链接时，Angular 应用程序会使用 Angular 路由器显示新组件，并且我需要将多个值传递给其他组件。

我不确定如何将参数传递给 cellRendererFramework 类。

数据网格的列定义

this.columnDefs = [
      { headerName: "Hotel ID", field: "HotelID", width: 500,
        cellRendererFramework: LinkcompComponent },
      { headerName: "Account Number", field: "AccountNumber" , width: 700 },
      { headerName: "Customer Name", field: "PartyName", width: 670  }
    ];

cellRendererFramework组件的

HTML文件

<a [routerLink]="['/trxDetails',params.value]">{{ params.value }}</a>

是否可以向 cellRendererFramework 组件传递额外的参数？

【问题讨论】：

标签： angular2-routing angular2-directives ag-grid

【解决方案1】：

你找到方法了吗？我和你的情况完全一样。需要将“routerLink”作为参数传递给这个cellRendererFramework组件，这样我就可以使其通用并在多个ag-grids / pages中使用该组件。

@Component({
// template: '<a routerLink="/trade-detail">{{params.value}}</a>'
template: '<a [routerLink]="inRouterLink">{{params.value}}</a>'
})
export class RouterLinkRendererComponent implements AgRendererComponent {
   @Input('inRouterLink') public inRouterLink = "/trade-detail";
   params: any;

编辑

好的，多看几遍后在他们的网站上找到了答案。

https://www.ag-grid.com/javascript-grid-cell-rendering-components/#complementing-cell-renderer-params

所以，就我而言，我像这样传递参数：

BlotterHomeComponent 类

columnDefs = [
{
  headerName: 'Status', field: 'status',
  cellRendererFramework: RouterLinkRendererComponent,
  cellRendererParams: {
    inRouterLink: '/trade-detail'
  }
},

RouterLinkRenderer 类

@Component({
template: '<a [routerLink]="params.inRouterLink">{{params.value}}</a>'
})
export class RouterLinkRendererComponent implements AgRendererComponent {
  params: any;

  agInit(params: any): void {
    this.params = params;
  }

  refresh(params: any): boolean {
    return false;
  }
}

【讨论】：