web-dev-qa-db-ja.com

セル内にリンクがあるAg-Gridリンク

Ag-gridを使用してangular 4アプリを構築していますが、セルにリンクを配置する方法を見つけようとすると問題が発生します。誰かがその問題で私を助けることができますか？ありがとう

ag-grid
11
Tom Brzeski

これを確認してください デモ

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

このデモでは、列「city」のセル値はハイパーリンクです。

17
C.O.G

先日これに苦労しましたが、最初に思ったよりも少し複雑でした。最終的に、リンクを送信するレンダラーコンポーネントを作成することになりました。これには、NgZoneマジックを最後まで使用する必要がありました。次のように列定義で使用できます。

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

InRouterLinkが送信するリンクであり、params.valueがセル値であるコンポーネント。つまり、「yourlink /：id」のように見えるangularルートにルーティングできます。より一般的なソリューションが必要ない場合は、これを少し単純化することもできますリンクを送信し、テンプレートにリンクをハードコーディングするだけで、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]);
        });
    }
}

UPDATE：これについてのブログ記事を書いた： https://medium.com/ag-grid/enhance-your-angular -grid-reports-with-formatted-values-and-links-34fa57ca2952

12
Michael Karén

これは少し古いですが、誰かを助けるかもしれません。 TypeScriptをAngular 5に設定したソリューションは、C.O.Gが提案したものに似ています。コンポーネントのTypeScriptファイルでは、列定義にカスタムセルレンダリング関数を含めることができます。

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

セルのレンダリング中にラムダ関数が呼び出されます。渡されるパラメーターの「値」は、カスタムレンダリングの生成に使用できるものです。

4
shr

CellRendererでhrefを使用する代わりに、ルートリンクが機能するため、cellrendererフレームワークを使用することをお勧めします。もう1つの欠点は、hrefを使用するとangularアプリケーション全体が再度リロードされ、ナビゲーション状態が命令型からポップステートに変更されることです。angular状態。

1
VENKATA SATYA NAVEEN NAGULAPAL