如何在Angular 5的ag-grid中使用ng-template作为cellRenderer？

我太懂你这种困扰了——在Angular项目里频繁使用AG Grid，每次为特定表格写专属的cellRenderer组件真的很繁琐：新建组件文件、配置组件、处理数据传递，最后这些组件大多只能在单个表格里用，完全没法复用，平白增加了很多开发和维护成本。用ng-template作为cellRenderer绝对是解决这个问题的最优解，既不用新建组件，还能把自定义逻辑直接写在当前组件模板里，下面给你一步步讲具体实现：

基本用法：定义模板并关联列配置 #

1. 在AG Grid容器内定义Ng-Template #

直接在ag-grid-angular标签内部写你的自定义单元格模板，用#模板ID标识，同时通过AG Grid提供的上下文变量获取行数据和单元格值：

<ag-grid-angular 
  [rowData]="yourRowData" 
  [columnDefs]="yourColumnDefs"
  [defaultColDef]="defaultColDef"
>
  <!-- 自定义状态单元格模板 -->
  <ng-template #statusCellTemplate let-data="data" let-value="value">
    <span class="status-tag" [ngClass]="{
      'tag-success': data.status === 'online',
      'tag-warning': data.status === 'idle',
      'tag-danger': data.status === 'offline'
    }">
      {{ value | titlecase }}
    </span>
  </ng-template>

  <!-- 可以同时定义多个模板，对应不同列 -->
  <ng-template #actionCellTemplate let-data="data">
    <button class="btn-sm btn-primary" (click)="handleEdit(data.id)">编辑</button>
    <button class="btn-sm btn-danger ml-2" (click)="handleDelete(data.id)">删除</button>
  </ng-template>
</ag-grid-angular>

这里的let-data和let-value是AG Grid内置的上下文变量：

• data：当前行的完整数据对象
• value：当前单元格对应字段的原始值

2. 在ColumnDefs中关联模板 #

在列配置里指定cellRenderer: 'agTemplate'，然后通过cellRendererParams.template绑定刚才定义的模板ID：

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

@Component({
  selector: 'app-your-table',
  templateUrl: './your-table.component.html'
})
export class YourTableComponent {
  yourRowData = [/* 你的行数据 */];
  yourColumnDefs: ColDef[] = [
    { headerName: '用户名', field: 'username' },
    { 
      headerName: '状态', 
      field: 'status',
      cellRenderer: 'agTemplate',
      cellRendererParams: {
        template: 'statusCellTemplate' // 对应模板的#ID
      }
    },
    { 
      headerName: '操作', 
      cellRenderer: 'agTemplate',
      cellRendererParams: {
        template: 'actionCellTemplate'
      },
      width: 150
    }
  ];
}

进阶：传递自定义参数到模板 #

如果你的模板需要根据列的不同配置调整逻辑，可以在cellRendererParams里添加自定义参数，然后在模板里用let-参数名接收：

// 列配置
{ 
  headerName: '金额', 
  field: 'amount',
  cellRenderer: 'agTemplate',
  cellRendererParams: {
    template: 'amountCellTemplate',
    showCurrencySymbol: true,
    currency: 'CNY'
  }
}

模板里接收并使用参数：

<ng-template #amountCellTemplate let-value="value" let-showCurrency="showCurrencySymbol" let-currency="currency">
  <span>
    {{ showCurrency ? (currency === 'CNY' ? '¥' : '$') : '' }}
    {{ value | number:'1.2-2' }}
  </span>
</ng-template>

为什么这比独立CellRenderer香？ #

• 零组件创建开销：不用新建.component.ts/.html/.css文件，所有逻辑都在当前组件内完成
• 直接复用当前组件的方法和状态：模板里可以直接调用当前组件的方法（比如上面的handleEdit），不用像独立组件那样通过@Output传递事件，省掉了事件绑定的麻烦
• 更直观的代码组织：表格的列配置和对应的自定义渲染逻辑放在同一个文件里，后期维护时找代码更方便

这种方案特别适合那些只针对当前表格的专属渲染逻辑，完全规避了创建不可复用组件的冗余工作，我在自己的项目里已经用了很久，亲测高效又省心！

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