web-dev-qa-db-fra.com

Lien Ag-Grid avec lien dans la cellule

Je crée une application angular 4 avec ag-grid et j'ai un problème avec la façon de trouver un lien dans la cellule. Quelqu'un peut-il m'aider à résoudre ce problème? Merci

ag-grid
11
Tom Brzeski

Veuillez vérifier cela démo

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

Dans cette démo, la valeur de cellule de la colonne 'ville' est un lien hypertexte.

17
C.O.G

J'ai eu du mal avec ça l'autre jour et c'était un peu plus complexe que je ne le pensais. J'ai fini par créer un composant de rendu auquel j'envoie le lien et qui avait besoin d'un peu de magie NgZone pour fonctionner complètement. Vous pouvez l'utiliser dans votre définition de colonne comme ceci:

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

Composant où inRouterLink est le lien que vous envoyez et params.value est la valeur de la cellule. Cela signifie que vous pouvez router vers votre angular qui pourrait ressembler à 'yourlink /: id'. Vous pouvez également simplifier un peu cela si vous ne voulez pas une solution plus générique en ne envoyer le lien et simplement coder en dur le lien dans le modèle et ne pas utiliser le 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]);
        });
    }
}

MISE À JOUR: J'ai écrit un article de blog à ce sujet: https://medium.com/ag-grid/enhance-your-angular -grid-reports-with-formated-values-and-links-34fa57ca2952

12
Michael Karén

C'est un peu daté, mais cela peut aider quelqu'un. La solution avec TypeScript sur Angular 5 est similaire à ce que C.O.G a suggéré. Dans le fichier TypeScript du composant, la définition de colonne peut contenir une fonction de rendu de cellule personnalisée.

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

La fonction lambda est appelée lors du rendu de la cellule. La "valeur" du paramètre qui est transmis est ce que vous pouvez utiliser pour générer un rendu personnalisé.

4
shr

Au lieu d'utiliser href dans cellRenderer, il est préférable d'utiliser le framework cellrenderer car le lien de route y fonctionne. Un autre inconvénient est que si vous utilisez href, l’application angular se rechargera à nouveau, elle change l’état de navigation d’impératif en popstate. Le routeur angular fonctionne sur l’impératif) Etat.

1
VENKATA SATYA NAVEEN NAGULAPAL