在Angular 5 Ag-grid数据表中使用cellRendererFramework

Question

我正在用angular 5构建一个应用程序。在我的HTML页面中，我有一个表，该表显示被查询的数据。此数据被显示在AG-网格使用指示。网格中的一列显示为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组件？

Answer 1

您是否找到一种方法来做到这一点？我和你的处境完全一样。需要将“ routerLink”作为参数传递给此cellRendererFramework组件，以便可以使其通用并在多个ag-grids /页面中使用该组件。

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