Использование cellRendererFramework в таблице данных Angular 5 ag-grid - PullRequest
Новая
       86

Использование cellRendererFramework в таблице данных Angular 5 ag-grid

0 голосов
/ 02 мая 2018

Я создаю приложение на угловом уровне 5. На моей HTML-странице есть таблица, в которой отображаются данные о запросах. Эти данные отображаются в ag-grid с использованием директивы . Один из столбцов в сетке отображается в виде HTML-ссылки. Я использую функцию cellRendererFramework для отображения значений в столбце в виде ссылки. Он работает нормально и отображает ссылку на значение для этого столбца в таблице для каждой строки. Мое требование состоит в том, что я хочу передать дополнительный параметр компоненту cellRendererFramework из основного класса компонента. Мне нужно это потому, что при нажатии на ссылку приложение 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 ?

1 Ответ

0 голосов
/ 17 мая 2018

Вы нашли способ сделать это? Я нахожусь в точно такой же ситуации, как и вы. Нужно передать "routerLink" в качестве параметра этому компоненту cellRendererFramework, чтобы я мог сделать его универсальным и использовать компонент в нескольких 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

Хорошо, нашла ответ на их веб-сайте после небольшого поиска.

https://www.ag -grid.com / JavaScript-сетка-клетка-рендеринг-компонента / # дополнения клеточно-визуализатор PARAMS

Итак, в моем случае я передаю параметры следующим образом:

BlotterHomeComponent class 

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