angular2-routing - 在 Angular 5 ag-grid 数据表中使用 cellRendererFramework

Question

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

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

数据网格的列定义

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

HTML 的文件cellRendererFramework 成分

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