Question

我正在以角度5构建应用程序。在我的HTML页面中，我有一个表格，显示正在查询的数据。此数据使用指令以 ag-grid 显示。网格中的一列显示为HTML链接。我正在使用 cellRendererFramework 功能将列中的值显示为链接。它工作正常，并在表格中为每一行显示该列的值的链接。我的要求是我想将其他参数传递给主要组件类的 cellRendererFramework 组件。我需要这个的原因是因为当点击链接时，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

你有没有办法做到这一点？我和你的情况完全一样。需要通过＆＃34; routerLink＆＃34;作为此cellRendererFramework组件的参数，以便我可以使其成为通用的并在多个ag-grid / 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 Class

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

在Angular 5 ag-grid数据表

1 个答案: