在Angular 5 Ag-grid数据表中使用cellRendererFramework [英] Using cellRendererFramework in Angular 5 ag-grid data table

问题描述

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

I am building a app in angular 5. In my HTML page, I have a table which shows the data on being queried. This data is being displayed in ag-grid using directive. One of the column in grid is displayed as HTML link. I am using cellRendererFramework feature to show the values in column as link. It is working fine and displays the link on the value for that column in table for each row. My requirement is that I want to pass additional parameter to cellRendererFramework component from the main component class. The reason I need this is because when the link is clicked the Angular app displays new components using angular routers and I need to pass multiple values to other component.

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

I am not sure how to pass parameters to 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 组件？

Is it possible to pass additional parameters to cellRendererFramework component?

推荐答案

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

Did you find a way to do this ? I am in exactly the same situation as you. Need to pass the "routerLink" as a parameter to this cellRendererFramework component, so that I can make it generic and use the component in multiple 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;

---

EDIT

---

EDIT

好吧，经过一番寻找之后，在他们自己的网站上找到了答案。

Ok, found the answer on their website itself after a little more looking.

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

因此，就我而言，我将参数传递为：

So, in my case, I pass the params like so:

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

这篇关于在Angular 5 Ag-grid数据表中使用cellRendererFramework的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！