Ag-Grid Angular - 如何为其中一列启用超链接

Question

我正在将代码从 Kendo 网格更改为 Ag-Grid，但我在使 link 与 Ag-Grid

一起工作时遇到问题

下面是放置在 Kendo Grid

的列之一中的旧代码

<a *ngIf="dataItem.userStatus === 0"
[routerLink]="['/users/details/'+dataItem.userId]">{{dataItem.userName}}</a>
<span *ngIf="dataItem.userStatus === 1">{{dataItem.userName}}</span>

我正在 Ag-Grid 中使用 columnDefs 定义新列，如下所示

{
    headerName: 'User Name',
    minWidth: 150,
    width: 250,
    field: 'userName',
    cellRendererFramework: RouterLinkRendererComponent,
    cellRendererParams: {
      inRouterLink: '[/users/details/]',
    }
  },

下面是 RouterLinkRendererComponent

的代码

import { Component, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { AgRendererComponent } from 'ag-grid-angular';

@Component({
    template: '<a [routerLink]="[params.inRouterLink,params.value]"  (click)="navigate(params.inRouterLink)">{{params.value}}</a>'
})
export class RouterLinkRendererComponent implements AgRendererComponent {
    params: any;

    constructor(
        private ngZone: NgZone,
        private router: Router) { }

    agInit(params: any): void {
        this.params = params;
    }

    refresh(params: any): boolean {
        return false;
    }

    // This was needed to make the link work correctly
    navigate(link) {
        this.ngZone.run(() => {
            this.router.navigate([link, this.params.value]);
        });
    }
}

如何使用新 Ag-Grid

使 Hyperlink 用于 UserName 列

目前报错如下。当我修改模板<a [routerLink]="[params.inRouterLink, params.value]" (click)="navigate(params.inRouterLink)">{{params.data.assetName}}</a>时，请将assetName视为下面的userName，并且它会重复出现在每一行中

我在下面的 Stackblitz 中添加了我的代码。

Stackblitz

当我在 Stackblitz 的 app.component.html 文件中添加 ag-angular-grid 时，出现以下错误。这是因为文件版本不匹配。我需要 Angular 6.

中的解决方案

Answer 1

我认为您只是没有导入 RouterModule 或错过了 RouterModule 上的 forRoot 方法。您还需要确保您的渲染器组件具有相同的 AgGridModule.withComponents。有一个链接有效的例子： Stackblitz

Ag-Grid Angular - 如何为其中一列启用超链接

Ag-Grid Angular - How to enable Hyperlink for one of the columns

ag-grid

angular