Как отрендерить Angular routerLink внутри ячейки ag-Grid?

Я думаю, что cellRenderer поддерживает только обычный HTML (без каких-либо специфичных для angular вещей).

Вы хотите использовать cellRendererFramework, как показано в этих примерах:

• https://www.ag-grid.com/ag-grid-angular2-support/
• https://www.ag-grid.com/javascript-grid-cell-rendering-components/#example-rendering-using-more-complex-angular-components

Поскольку вы используете RouterLink, вам, вероятно, понадобится RouterModule в moduleImports.

Вот решение. Я пробовал его с угловой 7, и он у меня отлично работает.

Сетка ag предоставляет события, и два из них - обратные вызовы onCellClicked и cellRendere.

Проблема с onCellCliecked и cellRendere в том, что они работают на JS. поэтому объект это, связанный с этими обратными вызовами, будет экземпляром JS.

Но для вызова функций angular или маршрутизации любого URL-адреса нам понадобится экземпляр компонента angular, который недоступен в этих обратных вызовах.

Итак, вот решение, позволяющее заставить этот экземпляр angular работать с компонентом.

Typescript сохраняет экземпляр текущего объекта в _это всякий раз, когда это недоступен. мы можем получить экземпляр углового компонента с помощью

const self = eval('_this');

этот себя будет содержать экземпляр компонента angular, поэтому мы можем вызывать любую функцию или службу из компонента angular, а также мы можем self.router.navigateByUrl(url)

вот пример

{field: 'plan', headerName: 'Plan Case', sortable:true,filter:true,
  cellRenderer:function(paramObj){
    //for making cell as link
    return `<a href = "javascript:void(0)" >Plan Case</a>`;
  }, 
  onCellClicked:function(data){
    const self = eval('_this');
    //navigating on clicking on cell
    self.router.navigateByUrl('YOUR_URL');
  }  
},

В качестве альтернативы вы можете вызвать любую угловую функцию из события onCellClicked. пример

onCellClicked:function(data){
        const self = eval('_this');
        //calling test function from angular component.
        self.test(data.data);
      } 

Спасибо

Я создал общий компонент, который можно использовать для любой ячейки ссылки.

использование

columnDefs = [
  {
    colId: 'My Column',
    cellRendererFramework: AgGridLinkCellComponent,
    cellRendererParams: {
      // `text` and `link` both accept either an string expression (same as `field`) or a function that gets ICellRendererParams
      text: 'title',
      link: (params: ICellRendererParams) => `/my-path/${_.get(params, 'data.id')}`
    }
  }
]

Зарегистрируйте компонент в вашем AppModule:

imports: [
    AgGridModule.withComponents([
      AgGridLinkCellComponent
    ])
]

Сам компонент:

import * as _ from 'lodash';
import {Component} from '@angular/core';
import {AgRendererComponent} from 'ag-grid-angular';
import {ICellRendererParams} from 'ag-grid-community';

@Component({
  selector: 'app-ag-grid-link-cell-component',
  template: '<a [routerLink] = "link">{{ text }}</a>',
})
export class AgGridLinkCellComponent implements AgRendererComponent {
  link: string;
  text: string;

  constructor() {
  }

  agInit(params: ICellRendererParams): void {
    this.refresh(params);
  }

  refresh(params: ICellRendererParams): boolean {
    const dataParams = params.colDef.cellRendererParams;
    this.link = _.isFunction(dataParams.link) ? dataParams.link(params) : _.get(params.data, dataParams.link);
    this.text = _.isFunction(dataParams.text) ? dataParams.link(params) : _.get(params.data, dataParams.text);
    return false;
  }
}