Angular ag-grid：如何在单元格中呈现 HTML？答案

【问题标题】：Angular ag-grid : How to render HTML in cell?Angular ag-grid：如何在单元格中呈现 HTML？
【发布时间】：2020-10-30 18:50:42
【问题描述】：

我正在使用“ag-grid-angular”：“^23.1.0”， “ag-grid-community”：“^23.1.0”
我想在一列中呈现自定义数据，例如innerHTML：

<i class="feather icon-edit-1 "></i>

我什至搜索了 ag-grid 文档，但找不到解决方案。

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

要呈现 HTML，您需要使用 ag-grid 的 cellRenderer 属性。这个解决方案最适合我：

customActions = function () {
  return '<span><a routerLink="/apps/your-path"><i class="users-edit-icon feather icon-edit-1 mr-50"></i></a><i class="users-delete-icon feather icon-trash-2"></i></span>';
};

// ag-Grid column defination
public columnDefs = [
  {
    headerName: 'Actions',
    cellRenderer: this.customActions
  }
];

【讨论】：

看到很长的答案后我很困惑，你的解决方案就像魅力一样。谢谢

【解决方案2】：

ag grid Angular Cell 渲染组件

    import { ChildMessageRenderer } from './child-message-renderer.component';
    @Component({
      selector: 'my-app',
      template: `
     <div class="example-wrapper">
  
  <ag-grid-angular
    #agGrid
    style="width: 100%; height: 100%;"
    id="myGrid"
    class="ag-theme-alpine"
    [columnDefs]="columnDefs"
    [rowData]="rowData"
    [context]="context"
    [frameworkComponents]="frameworkComponents"
    [defaultColDef]="defaultColDef"
    (gridReady)="onGridReady($event)"
  ></ag-grid-angular>
</div>
 `,
})
 export class AppComponent {
 private gridApi;
 private gridColumnApi;

 private columnDefs;
private rowData;
private context;
private frameworkComponents;
private defaultColDef;

constructor() {
this.columnDefs = [
  {
    headerName: 'Row',
    field: 'row',
    width: 150,
  },
  {
    headerName: 'Square',
    field: 'value',
    colId: 'square',
    width: 150,
  },
  {
    headerName: 'Child/Parent',
    field: 'value',
    cellRenderer: 'childMessageRenderer',
    colId: 'params',
    width: 180,
  },
 ];
 this.rowData = createRowData();
 this.context = { componentParent: this };
 this.frameworkComponents = {
  childMessageRenderer: ChildMessageRenderer,
 };


methodFromParent(cell) {
 alert('Parent Component Method from ' + cell + '!');
}
}

单元格渲染器

    import { Component } from '@angular/core';
    import { ICellRendererAngularComp } from '@ag-grid-community/angular';

   @Component({
  selector: 'child-cell',
  template: `
  <span
  ><button
    style="height: 20px"
    (click)="invokeParentMethod()"
    class="btn btn-info"
  >
    Invoke Parent
  </button></span
>
`
})
 export class ChildMessageRenderer implements ICellRendererAngularComp {
  public params: any;

 agInit(params: any): void {
  this.params = params;
 }

public invokeParentMethod() {
this.params.context.componentParent.methodFromParent(
  `Row: ${this.params.node.rowIndex}, Col: 
${this.params.colDef.headerName}`
 );
}

refresh(): boolean {
 return false;
 }
}

参考链接 - https://www.ag-grid.com/javascript-grid-cell-rendering-components/#example-rendering-using-angular-components

【讨论】：