如何在 ag-Grid 的单元格内渲染 Angular routerLink？

Question

我尝试在基本 HTML 页面上呈现时，我尝试呈现的 link 看起来像这样：

<a [routerLink]="['/leverance/detail', 13]">A new link</a>

当尝试在 ag-Grid 上渲染它时，我尝试如下操作：

src\app\leverancer\leverancer.component.ts

ngOnInit() {
    this.dataGridColumnDefs = [
          { 
            headerName: 'Type', 
            field: 'leveranceType.name', 
            width: 150,
            cellRenderer: this.customCellRendererFunc       
          }
    ];
}

customCellRendererFunc(params): string {
  const cellContent `<a [routerLink]="['/leverance/detail', 13]">A new link</a>`;
  return cellContent;
}

但我在我的 ag-Grid 中没有看到有效的 routerLink。你能告诉我我需要做什么才能在我的 ag-Grid 中呈现一个工作的 routerLink 吗？

Answer 1

我认为 cellRenderer 只支持普通的 HTML（没有任何 angular 特定的东西）。

您想使用 cellRendererFramework，如这些示例所示：

由于您使用 RouterLink，您可能需要 RouterModule 在 moduleImports

Answer 2

这是解决方案。我用 angular 7 试了一下，对我来说效果很好。

ag grid 提供事件和回调 onCellClicked 和 cellRendere 是其中两个。

onCellCliecked 和 cellRendere 的问题在于它们在 JS 上工作。所以与这些回调关联的 this 对象将是一个 JS 实例。

但是对于 angular 调用函数或路由任何 url 我们将需要 angular 组件的实例，这些回调中不可用

所以这是让 angular 实例与组件一起工作的解决方案。

只要 this 不可用，Typescript 就会将当前对象的实例存储在 _this 中。我们可以通过

获取 angular 组件的实例

const self = eval('_this');

这个 self 将保存 angular 组件的实例，因此我们可以从 angular 组件调用任何函数或服务，我们也可以 self.router.navigateByUrl(url)

这里是例子

{field: 'plan', headerName: 'Plan Case', sortable:true,filter:true,
  cellRenderer:function(paramObj){
    //for making cell as link
    return `<a href="javascript:void(0)" >Plan Case</a>`;
  }, 
  onCellClicked:function(data){
    const self = eval('_this');
    //navigating on clicking on cell
    self.router.navigateByUrl('YOUR_URL');
  }  
},

或者，您可以从 onCellClicked 事件中调用任何 angular 函数。例子

onCellClicked:function(data){
        const self = eval('_this');
        //calling test function from angular component.
        self.test(data.data);
      }

谢谢

Answer 3

我创建了一个可用于任何 link 单元格的通用组件。

用法

columnDefs = [
  {
    colId: 'My Column',
    cellRendererFramework: AgGridLinkCellComponent,
    cellRendererParams: {
      // `text` and `link` both accept either an string expression (same as `field`) or a function that gets ICellRendererParams
      text: 'title',
      link: (params: ICellRendererParams) => `/my-path/${_.get(params, 'data.id')}`
    }
  }
]

在您的 AppModule:

中注册组件

imports: [
    AgGridModule.withComponents([
      AgGridLinkCellComponent
    ])
]

组件本身：

import * as _ from 'lodash';
import {Component} from '@angular/core';
import {AgRendererComponent} from 'ag-grid-angular';
import {ICellRendererParams} from 'ag-grid-community';

@Component({
  selector: 'app-ag-grid-link-cell-component',
  template: '<a [routerLink]="link">{{ text }}</a>',
})
export class AgGridLinkCellComponent implements AgRendererComponent {
  link: string;
  text: string;

  constructor() {
  }

  agInit(params: ICellRendererParams): void {
    this.refresh(params);
  }

  refresh(params: ICellRendererParams): boolean {
    const dataParams = params.colDef.cellRendererParams;
    this.link = _.isFunction(dataParams.link) ? dataParams.link(params) : _.get(params.data, dataParams.link);
    this.text = _.isFunction(dataParams.text) ? dataParams.link(params) : _.get(params.data, dataParams.text);
    return false;
  }
}

如何在 ag-Grid 的单元格内渲染 Angular routerLink？

How to Render an Angular routerLink inside the cell of an ag-Grid?

typescript

angular

ag-grid-angular