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

cellRendererFramework 组件的

HTML 文件

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

<小时>

编辑

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

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屋！