Question

我正在使用ag-grid构建angular 4应用程序，我在试图找出如何在单元格中建立链接时遇到问题。有人可以帮我解决这个问题吗？感谢

Answer 1

请检查此demo

cellRenderer: function(params) {
  return '<a href="https://www.google.com" target="_blank">'+ params.value+'</a>'
}

在此演示中，列＆＃39; city＆＃39;的单元格值是一个超链接。

Answer 2

前几天我挣扎着，这比我想象的要复杂得多。我最终创建了一个渲染器组件，我在链接中发送了该组件，并且需要一点NgZone魔法才能一直工作。您可以在列定义中使用它，如下所示：

cellRendererFramework: RouterLinkRendererComponent,
cellRendererParams: {
    inRouterLink: '/yourlinkhere',
}

组件，其中inRouterLink是您发送的链接，params.value是单元格值。这意味着您可以路由到您的角度路线，该路线看起来像＆＃39; yourlink /：id＆＃39;。如果您不想通过链接发送并只是硬编码模板中的链接而不使用cellRendererParams，那么您也可以通过不想要更通用的解决方案来简化这一点。

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

更新：我撰写了一篇关于此事的博文：https://medium.com/ag-grid/enhance-your-angular-grid-reports-with-formatted-values-and-links-34fa57ca2952

Answer 3

这有点过时了，但它可能对某人有所帮助。 Angular 5上的typescript解决方案类似于C.O.G所建议的。在组件的打字稿文件中，列定义可以包含自定义单元格渲染功能。

 columnDefs  = [
    {headerName: 'Client', field: 'clientName' },
    {headerName: 'Invoice Number', field: 'invoiceNumber',
        cellRenderer: (invNum) => 
              `<a href="/invoice/${invNum.value}" >${invNum.value}</a>` },
];

在渲染单元格时调用lambda函数。价值＆＃39;传递的参数是您可以用来生成自定义渲染的参数。

Answer 4

我实现了类似于Michael和Tom的方法，只使用了[routerLink]而没有(click)处理程序。但是最近我开始收到可怕的警告：

Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?

尝试了一段时间后，我发现了这篇文章并添加了导航点击处理程序功能，该功能使应用程序再次开始工作，但是我发现“ 在Angular区域之外触发导航”消息仍然出现在日志中。

因此，尽管(click)="navigate()"调用触发了ngZone内部的导航，但仍在进行[routerLink]调用，这困扰着我。我真的不希望进行两次导航尝试，以防将来API更新时发生任何更改。

我决定将锚标签替换为跨度pseudoLink。

.pseudoLink {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

@Component({
   template: '<span class="pseudoLink" (click)="navigate()">{{mytitle}}</span>'
})

navigate() {
  this.ngZone.run(
    () => {
      console.log("LinkRendererComponent: navigate: (", this.mylink, ")");
      this.router.navigate([this.mylink]);
    }
  );
}

this.mylink是根据通过agInit()传递的参数在cellRendererParams方法中定义的。

这对我的主要目的很好，即使单元格看起来像一个链接。我唯一丢失的是浏览器状态栏中的URL路径弹出窗口。

希望这可能对其他人有所帮助。

Answer 5

我们遇到了这个问题，它并不简单。
我们最终以不同的方式解决了它，因为我们在ag-Grid顶部使用了AdapTable。因此，我们创建了一个AdapTable操作列，并在RenderFunction中提供了链接。这对我们来说效果最好，因为我们并不总是希望链接出现，因此我们可以使用ShouldRender函数来决定是否要为每一行显示链接。

Answer 6

与其在cellRenderer中使用href，不如使用cellrenderer框架，因为路由链接可以在其中工作。另一个缺点是，如果您使用href，则整个angular应用程序将再次重新加载，它将导航状态从命令状态更改为popstate。角路由器在命令状态下工作。

Answer 7

使用单元格渲染器是正确的解决方案，但最缺少的答案是阻止click事件到达AgGrid：

cellRenderer: ({value}) => {
    const a = document.createElement('a');
    a.innerText = a.href = value;
    a.target = '_blank';
    // Prevent click from reaching AgGrid
    a.addEventListener('click', event => { event.stopPropagation() });
    return a;
}

如果单击气泡冒泡到AgGrid，将导致行选择更改，如果已启用则更改。

Answer 8

@MichaelKarén的灵感

这是一个改进的版本，更加灵活。

我们可以设置要在链接中显示什么文本
我们可以传递两个以上的routerLink参数
根据数据解析routerLink
支持目标
仅在链接不适用时显示文本
还有更多（如果要添加），只需进一步编辑此组件

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';

export interface IRouterLinkRendererComponentOptions {
    routerLinkParams?: any[];
    linkDescription?: string;
    textOnly?: string;
    target?: string;
}

@Component({
    template: `
        <a *ngIf="params.textOnly == null; else textOnlyBlock" 
           [routerLink]="params.routerLinkParams" 
           [target]="params.target ? params.target : '_self'"
        >
            {{ params.linkDescription }}
        </a>

        <ng-template #textOnlyBlock>
            {{ params.textOnly }}
        </ng-template>
    `
})
export class RouterLinkRendererComponent implements ICellRendererAngularComp {
    params: IRouterLinkRendererComponentOptions;

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

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

这样我们可以动态地解析参数并仅在需要通过以下方式在列定义中返回文本

{
...
    cellRendererFramework: RouterLinkRendererComponent,
    cellRendererParams: {
        routerLinkRendererComponentOptions: (param): IRouterLinkRendererComponentOptions => {
            if (param.data.dispatch_adjustment) {
                return {
                    routerLinkParams: ['/adjustments', param.data.dispatch_adjustment.id, 'edit'],
                    linkDescription: '#' + param.data.dispatch_adjustment.id
                };
            } else {
                return {
                    textOnly: '-'
                };
            }
        }
    },
...
},

Ag-Grid Link与单元格中的链接

8 个答案: