AG-Grid技术问题：如何在单元格数据中插入换行符

Hi James，别担心，新手刚接触AG-Grid时遇到这类格式问题太正常啦！我来帮你解决这个换行需求，有几种可行的方案，你可以根据自己的场景选择：

方案1：利用CSS样式让换行符\n生效 #

这是最简洁的方法，不需要额外的渲染逻辑，只需要给目标列配置单元格样式，让它识别换行符：

columnDefs = [
  {
    headerName: '汇总数据',
    field: 'summary',
    // 拼接两段文本并加入换行符，也可以直接从数据源读取带\n的内容
    valueGetter: (params) => `${params.data.summaryOne}\n${params.data.summaryTwo}`,
    // 设置样式让换行符生效
    cellStyle: { 'white-space': 'pre-wrap' }
  }
];

AG-Grid默认单元格的white-space属性是nowrap或normal，不会解析\n，设置pre-wrap后就会把换行符转换成实际的换行效果，全程是纯文本处理，没有安全风险。

方案2：使用HTML<br>标签配合dangerouslyAllowHtml #

如果你更习惯用HTML标签控制换行，可以在单元格渲染器里返回带<br>的内容，同时开启dangerouslyAllowHtml告诉AG-Grid解析HTML：

columnDefs = [
  {
    headerName: '汇总数据',
    field: 'summary',
    cellRenderer: (params) => {
      return `${params.data.summaryOne}<br>${params.data.summaryTwo}`;
    },
    // 允许AG-Grid渲染HTML内容
    dangerouslyAllowHtml: true
  }
];

⚠️ 注意：这个属性名字里的“dangerously”是提醒你，如果内容来自用户输入，要注意XSS风险，确保内容是安全可信的。

方案3：自定义Angular组件作为单元格渲染器（推荐Angular项目使用） #

如果你的项目更注重Angular的组件化实践，或者以后可能要扩展这个单元格的样式/交互，可以创建一个专门的Angular组件来渲染：

1. 首先创建单元格组件：

// summary-cell.component.ts
import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
  template: `
    <div class="summary-item">{{params.data.summaryOne}}</div>
    <div class="summary-item">{{params.data.summaryTwo}}</div>
  `,
  styles: [`
    .summary-item { margin: 2px 0; }
  `]
})
export class SummaryCellComponent implements ICellRendererAngularComp {
  params: any;

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

  refresh(params: any): boolean {
    return false;
  }
}

2. 在你的模块里声明并注册这个组件（Angular5需要加入entryComponents）：

// your-module.ts
import { SummaryCellComponent } from './summary-cell.component';

@NgModule({
  declarations: [SummaryCellComponent],
  entryComponents: [SummaryCellComponent] // 动态组件需要加入这里
})
export class YourModule { }

3. 在列定义里使用这个组件：

columnDefs = [
  {
    headerName: '汇总数据',
    field: 'summary',
    cellRendererFramework: SummaryCellComponent
  }
];

这种方式完全符合Angular的开发模式，你可以自由控制模板和样式，也没有XSS的顾虑。

试试上面的方法，应该就能实现你想要的换行效果啦！

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