Angular 14的ag-grid社区版：存在指定列时换行显示innerHTML

实现思路 #

利用AG-Grid社区版的**Master-Detail（主从行）**功能，为包含有效comments数据的行自动添加详情行，渲染评论的HTML内容。这种方式不会破坏原数据结构，也能正常支持排序、过滤等AG-Grid原生功能。

具体实现步骤 #

1. 配置AG-Grid主从行模式 #

在组件的gridOptions中开启主从行模式，并定义详情行的渲染逻辑：

import { Component } from '@angular/core';
import { GridOptions } from 'ag-grid-community';
import { DomSanitizer } from '@angular/platform-browser';
import { CommentDetailComponent } from './comment-detail.component';

@Component({
  selector: 'app-employee-grid',
  templateUrl: './employee-grid.component.html',
  styleUrls: ['./employee-grid.component.css']
})
export class EmployeeGridComponent {
  gridOptions: GridOptions = {
    masterDetail: true,
    defaultMasterRowOpen: true, // 默认展开详情行
    detailRowRendererParams: {
      // 将当前行数据传递给详情组件
      getDetailRowData: (params) => params.successCallback([params.data]),
      detailRenderer: CommentDetailComponent // 自定义详情渲染组件
    },
    // 仅当comments存在且非空时，显示详情行
    isRowMaster: (dataItem) => !!dataItem.comments,
    rowHeight: 40,
    detailRowHeight: 40
  };

  // 列定义
  columnDefs = [
    { field: 'column1', headerName: 'Column 1' },
    { field: 'column2', headerName: 'Column 2' }
  ];

  // 示例数据
  rowData = [
    { column1: 'Value 1', column2: 'Value 2', comments: '<span style="color:#2ecc71">comments : Good</span>' },
    { column1: 'Value 3', column2: 'Value 4', comments: '' },
    { column1: 'Value 5', column2: 'Value 6', comments: '<span style="color:#3498db">comments : Working</span>' }
  ];

  constructor(private sanitizer: DomSanitizer) {}
}

2. 创建自定义详情行组件 #

新建CommentDetailComponent，安全渲染评论的HTML内容（必须用DomSanitizer处理，避免XSS风险）：

import { Component } from '@angular/core';
import { IDetailCellRendererParams } from 'ag-grid-community';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-comment-detail',
  template: `<div class="comment-content" [innerHTML]="safeComment"></div>`
})
export class CommentDetailComponent {
  safeComment: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {}

  // AG-Grid初始化时传入参数
  agInit(params: IDetailCellRendererParams): void {
    this.safeComment = this.sanitizer.bypassSecurityTrustHtml(params.data.comments);
  }
}

3. 添加样式优化显示 #

在组件CSS中添加样式，让详情行呈现合并列的视觉效果：

.comment-content {
  padding-left: 20px;
  line-height: 40px;
  color: #555;
  width: 100%;
}

/* 移除详情行的单元格边框，统一样式 */
.ag-detail-row .ag-cell {
  border: none;
  padding: 0;
}

4. 模板中引入AG-Grid #

在组件模板中添加AG-Grid标签：

<ag-grid-angular
  style="width: 100%; height: 500px;"
  class="ag-theme-alpine"
  [gridOptions]="gridOptions"
  [columnDefs]="columnDefs"
  [rowData]="rowData"
></ag-grid-angular>

关键注意事项 #

• 安全处理HTML：必须使用DomSanitizer处理评论内容，否则Angular会默认过滤HTML标签，同时避免XSS攻击风险。
• 控制详情行显示：通过isRowMaster函数精准控制哪些行需要显示详情，避免无意义的空行。
• 社区版兼容性：上述方案完全基于AG-Grid社区版实现，无需依赖企业版功能。

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