Angular ag-grid CellRenderer无法解析Spinner组件，如何解决？

• 问题根源：直接通过cellRenderer返回HTML字符串时，AG Grid只是将字符串插入DOM，不会经过Angular的编译流程，因此<spinner>组件和属性绑定无法被解析。
• 正确方案：使用AG Grid的Angular单元格渲染器（cellRendererFramework），让Angular负责组件的创建与编译。

1. 创建自定义Angular单元格渲染器组件 #

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

@Component({
  template: `
    <div>
      <spinner [show]="spinners['row_' + params.data.index]"></spinner>
      {{ params.data.index }}
    </div>
  `
})
export class IndexCellRendererComponent implements ICellRendererAngularComp {
  params: any;
  spinners: any;

  // 初始化时接收AG Grid传递的参数
  agInit(params: any): void {
    this.params = params;
    // 从context中获取父组件的spinners状态对象
    this.spinners = params.context.spinners;
  }

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

2. 在模块中声明并配置组件 #

import { NgModule } from '@angular/core';
import { AgGridModule } from 'ag-grid-angular';
import { IndexCellRendererComponent } from './index-cell-renderer.component';
import { SpinnerComponent } from './spinner.component'; // 引入你的Spinner组件

@NgModule({
  declarations: [
    IndexCellRendererComponent,
    SpinnerComponent
  ],
  imports: [AgGridModule],
  entryComponents: [IndexCellRendererComponent] // Angular 9+ 可省略，旧版本需添加
})
export class YourFeatureModule { }

3. 修改列定义使用自定义渲染器 #

// 假设spinners是当前组件的属性
index_col_def = {
  headerName: "ID",
  field: "index",
  cellRendererFramework: IndexCellRendererComponent,
  // 通过context传递父组件的spinners对象
  context: { spinners: this.spinners }
};

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