Ag-Grid Ссылка со ссылкой в ячейке

Ответ 1

Пожалуйста, проверьте это демо

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

В этой демонстрации значение ячейки для столбца city является гиперссылкой.

Ответ 2

Я боролся с этим на днях, и это было немного сложнее, чем я думал. Я закончил с созданием компонента рендерера, на который я отправляю ссылку, и для его работы нужно было немного магии NgZone. Вы можете использовать его в своем определении столбца следующим образом:

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

Компонент, где inRouterLink - ссылка, которую вы отправляете, а params.value - значение ячейки. Это означает, что вы можете направить свой угловой маршрут, который может выглядеть примерно так: "yourlink/: id". Вы также можете немного упростить это, если не хотите более общего решения, не отправляя ссылку и просто жестко кодируя ссылку в шаблоне и не используя 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

Ответ 3

Это немного устарело, но это может помочь кому-то. Решение с машинописным текстом на Angular 5 аналогично тому, что предлагает COG. В файле typescript файла определение столбца может содержать пользовательскую функцию рендеринга ячейки.

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

Лямбда-функция вызывается при рендеринге ячейки. "Значение" передаваемого параметра - это то, что вы можете использовать для создания настраиваемого рендеринга.

Ответ 4

Вместо использования href в cellRenderer лучше использовать инфраструктуру cellrenderer, так как в ней работает маршрутная ссылка. Еще одним недостатком является то, что если вы используете href, тогда все угловое приложение будет перезагружено снова, оно меняет состояние навигации с обязательного на полугодовое состояние. Угловой роутер работает на императивном состоянии.