Я создаю угловое приложение с ag-сетью, и у меня возникла проблема с попыткой выяснить, как поместить ссылку в ячейку. Может ли кто-нибудь помочь мне в этом вопросе? Спасибо
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, тогда все угловое приложение будет перезагружено снова, оно меняет состояние навигации с обязательного на полугодовое состояние. Угловой роутер работает на императивном состоянии.