当前版本Angular-Slickgrid是否支持DomSanitization以渲染富文本？

当前所有稳定版本的Angular-Slickgrid均支持通过Angular原生DomSanitizer实现富文本渲染，可完整保留HTML标签的格式效果。

实现步骤 #

1. 自定义安全HTML管道 #

首先创建全局安全HTML管道，用于标记受信任的富文本内容，避免Angular默认的安全过滤逻辑清理HTML标签：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(value: string): SafeHtml {
    // 仅对可信来源的富文本使用该管道，避免XSS安全风险
    return this.sanitizer.bypassSecurityTrustHtml(value);
  }
}

创建后需将该管道添加到项目对应模块的declarations数组中完成注册。

2. 配置Slickgrid列定义 #

在表格的列配置中，针对需要渲染富文本的字段，启用HTML渲染并关联上述管道即可：

import { Column, GridOption } from 'angular-slickgrid';

export class YourComponent {
  columnDefinitions: Column[] = [
    {
      id: 'name',
      name: '用户名',
      field: 'name',
      // 启用HTML内容渲染
      enableHtmlRendering: true,
      // 关联安全HTML管道处理富文本
      formatter: (row, cell, value) => {
        return value ? this.safeHtmlPipe.transform(value) : '';
      }
    },
    // 其他列配置...
  ];

  gridOptions: GridOption = {
    // 其他全局表格配置
  };

  constructor(private safeHtmlPipe: SafeHtmlPipe) {}
}

效果验证 #

针对你提供的示例数据：

name: <strong><underline>John K Paul</underline></strong>

完成上述配置后，表格中该单元格会直接渲染出带加粗、下划线效果的John K Paul文本，富文本格式完全保留。

注意事项 #

• 必须确保待渲染的富文本来源可信（仅内部接口返回、无用户可随意输入的恶意内容），避免XSS注入攻击。
• 不要直接关闭Angular-Slickgrid的全局安全过滤配置，通过自定义管道处理是最安全的实现方式。

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