Angular中XML格式化管道HTML显示异常，如何集成Safe HTML？

你的推测完全正确——问题出在Angular的HTML安全转义机制上。当你用{{}}插值绑定的时候，Angular会自动把所有HTML字符转义成纯文本，所以管道生成的<br>和 根本不会被浏览器解析成换行和空格。下面是具体的修复方案：

步骤1：修改管道，返回安全的HTML类型 #

我们需要让管道返回Angular认可的SafeHtml类型，而不是普通字符串。这需要用到Angular的DomSanitizer服务来标记处理后的内容为安全可渲染的。

修改后的管道代码：

import { Pipe, PipeTransform } from '@angular/core';
import * as jQuery from 'jquery';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; // 新增导入

@Pipe({ name: 'formatXml' })
export class FormatXmlPipe implements PipeTransform {
  // 注入DomSanitizer服务
  constructor(private sanitizer: DomSanitizer) {}

  transform(xml: string): SafeHtml { // 修改返回类型为SafeHtml
    let formatted = '';
    const reg = /(>)(<)(\/*)/g;
    xml = xml.replace(reg, '$1\r\n$2$3');
    let pad = 0;
    
    jQuery.each(xml.split('\r\n'), function (index, node) {
      let indent = 0;
      if (node.match(/.+<\/\w[^>]*>$/)) {
        indent = 0;
      } else if (node.match(/^<\/\w/)) {
        if (pad !== 0) {
          pad -= 1;
        }
      } else if (node.match(/^<\w[^>]*[^\/]>.*$/)) {
        indent = 1;
      } else {
        indent = 0;
      }
      
      let padding = '';
      for (let i = 0; i < pad; i++) {
        padding += ' ';
      }
      formatted += padding + node + '\r\n';
      pad += indent;
    });

    // 处理HTML转义字符
    const escaped = formatted
      .replace(/&amp;/g, '&amp;amp;')
      .replace(/&lt;/g, '&lt;')
      .replace(/&gt;/g, '&amp;gt;')
      .replace(/ /g, '&amp;nbsp;')
      .replace(/\n/g, '&lt;br /&gt;');

    // 标记内容为安全HTML并返回
    return this.sanitizer.bypassSecurityTrustHtml(escaped);
  }
}

步骤2：修改模板绑定方式 #

不要再用插值{{}}，而是用[innerHTML]属性绑定来渲染安全HTML：

<td *ngIf="i==_rowToShow" [innerHTML]="car.ID | formatXml"></td>

为什么这样能生效？ #

• DomSanitizer.bypassSecurityTrustHtml()会告诉Angular：“我确认这段HTML是安全的，不要转义它”，从而绕过默认的安全检查。
• [innerHTML]会把绑定的HTML内容直接渲染到DOM中，而不是当成纯文本显示。

另外提个小建议：你的管道里导入了escape但没用到，可以考虑删掉它；如果项目里没有依赖jQuery的必要，也可以用原生JS的forEach替代jQuery.each，减少第三方依赖。

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