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

Answer 1

我认为cellRenderer仅支持普通HTML（不包含任何特定于角度的内容）。

如以下示例所示，您要使用cellRendererFramework：

由于使用了RouterLink，因此可能需要在RouterModule中使用moduleImports

Answer 2

这是解决方案。我用 angular 7 进行了尝试，它对我来说很好用。

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

onCellCliecked和cellRendere的

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

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

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

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

获得角度分量的实例

const self = eval('_this');

此自身将保存角度分量的实例，因此我们可以从角度分量调用任何函数或服务，而且我们可以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);
      }

谢谢

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

2 个答案: