如何在AG Grid的cellRenderer中正确渲染Font Awesome的<fa-icon>标签？

你遇到的问题核心在于：AG Grid的字符串型cellRenderer只是将纯HTML字符串插入DOM，Angular不会对这段动态插入的HTML进行组件编译。<fa-icon>是Angular组件，不是原生HTML标签，所以直接返回字符串的方式不会让Angular实例化这个组件，自然无法正常渲染。

下面是两种可行的解决方案，推荐第一种（组件式渲染），这也是AG Grid在Angular生态中的最佳实践：

方案一：使用Angular Cell Renderer Component（推荐） #

创建一个独立的Angular组件来处理单元格渲染，这样就能在模板中正常使用<fa-icon>标签，Angular会正常编译组件。

步骤1：创建单元格渲染组件 #

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
// 导入你需要的Font Awesome图标
import { faCoffee, faBell, faFire } from '@fortawesome/free-solid-svg-icons';

@Component({
  template: `
    <div class="event-icons">
      <fa-icon *ngIf="params.data.PHD" [icon]="faCoffee" class="icon-margin"></fa-icon>
      <fa-icon *ngIf="params.data.DG" [icon]="faBell" class="icon-margin"></fa-icon>
      <fa-icon *ngIf="params.data.HOT" [icon]="faFire" class="icon-margin"></fa-icon>
    </div>
  `,
  styles: [`
    .event-icons { display: flex; align-items: center; }
    .icon-margin { margin-right: 8px; }
  `]
})
export class EventsCellRendererComponent implements ICellRendererAngularComp {
  params: any;
  // 暴露图标给模板使用
  faCoffee = faCoffee;
  faBell = faBell; // 替换为DG对应的图标
  faFire = faFire; // 替换为HOT对应的图标

  // 初始化时接收AG Grid传递的参数
  agInit(params: any): void {
    this.params = params;
  }

  // 单元格数据更新时刷新组件
  refresh(params: any): boolean {
    this.params = params;
    return true;
  }
}

步骤2：在模块中声明组件 #

确保你的组件被添加到所属模块的declarations和entryComponents（Angular 9+可以不用entryComponents，但AG Grid有时需要）中：

import { NgModule } from '@angular/core';
import { AgGridModule } from 'ag-grid-angular';
import { EventsCellRendererComponent } from './events-cell-renderer.component';

@NgModule({
  declarations: [EventsCellRendererComponent],
  imports: [AgGridModule],
  entryComponents: [EventsCellRendererComponent] // Angular 9+可选，但建议保留
})
export class YourModule { }

步骤3：在AG Grid列配置中使用该组件 #

把原来的cellRenderer替换为cellRendererFramework，指定我们创建的组件：

// 列配置示例
{
  width: 150,
  headerName: "Events",
  cellRendererFramework: EventsCellRendererComponent,
  resizable: true,
  filter: false,
}

方案二：手动创建FaIconComponent实例（不推荐，适合简单场景） #

如果不想创建独立组件，可以通过ComponentFactoryResolver手动创建<fa-icon>组件实例并挂载到DOM中，但这种方法需要处理组件注入和变更检测，比较繁琐：

// 假设你的组件中已经注入了ComponentFactoryResolver和Renderer2
// 在AG Grid列配置中：
{
  width: 150,
  headerName: "Events",
  cellRenderer: (params: any) => {
    const container = document.createElement('div');
    const componentFactoryResolver = params.context.componentFactoryResolver;
    const renderer = params.context.renderer;
    const injector = params.context.injector;

    if (params.data.PHD) {
      const iconFactory = componentFactoryResolver.resolveComponentFactory(FaIconComponent);
      const iconComponent = iconFactory.create(injector);
      iconComponent.instance.icon = faCoffee;
      renderer.appendChild(container, iconComponent.location.nativeElement);
      iconComponent.changeDetectorRef.detectChanges();
    }
    // 同理处理DG和HOT的图标

    return container;
  },
  resizable: true,
  filter: false,
}

注意：这种方法需要在AG Grid的context中传递componentFactoryResolver、renderer和injector，你需要在初始化AG Grid时配置：

<ag-grid-angular
  [gridOptions]="gridOptions"
  [context]="{ componentFactoryResolver: cfr, renderer: renderer, injector: injector }"
></ag-grid-angular>

并在组件中注入这些服务：

import { ComponentFactoryResolver, Renderer2, Injector } from '@angular/core';

constructor(
  public cfr: ComponentFactoryResolver,
  public renderer: Renderer2,
  public injector: Injector
) { }

内容的提问来源于stack exchange，提问作者TyCox94