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

Question

当我试图在基本的 HTML 页面上呈现它时，我试图呈现的链接看起来像这样：

<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 需要做什么吗？

score 5 · Accepted Answer

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

你想使用cellRendererFramework这些例子中看到的：

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

score 0 · Accepted Answer

这是解决方案。我用angular 7试过它，它对我来说很好用。

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

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

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

所以这是使该角度实例与组件一起使用的解决方案。

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

const self = eval('_this');

这个self将保存角度组件的实例，因此我们可以从角度组件调用任何函数或服务，我们也可以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事件调用任何角度函数。例子

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

谢谢

score 0 · Accepted Answer

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

用法

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

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

3 回答 3

Related

Reference