Angular 19中使用innerHTML展示API返回HTML内容时二次编码问题求助

兄弟我太懂你这种踩坑的憋屈感了！你遇到的核心问题是HTML实体二次编码，咱们来掰扯清楚：

你从API拿到的data.Content已经是转义后的HTML实体了（比如原本的<p>被转成了<p>），但你之前直接把它传给safeHtml管道，只是告诉Angular「这个内容是安全的可以渲染」，却没把已经转义的实体还原成真实的HTML标签。结果Angular在渲染时又把内容里的空格转成了 ，就出现了你看到的双重转义尴尬情况。

给你个直接能用的解决方案，修改你的safeHtml管道，先把转义的HTML实体解码回原始HTML，再做安全信任处理：

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

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

  transform(value: string): SafeHtml {
    // 先解码API返回的HTML实体
    const decodedHtml = this.decodeHtmlEntities(value);
    // 再告诉Angular这个HTML是安全的
    return this.sanitized.bypassSecurityTrustHtml(decodedHtml);
  }

  private decodeHtmlEntities(html: string): string {
    // 借助临时DOM元素解码实体，浏览器会自动处理转义字符
    const tempElement = document.createElement('div');
    tempElement.innerHTML = html;
    return tempElement.innerHTML;
  }
}

额外注意点： #

• 如果你用的是Angular 19的独立组件，记得把这个管道加到组件的imports数组里；如果是基于NgModule的项目，要在对应模块的declarations里声明这个管道。
• 也可以用DOMParser来解码，效果完全一致，把解码方法换成下面这段就行：

private decodeHtmlEntities(html: string): string {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  return doc.body.innerHTML;
}

这么修改后，[innerHTML]="data.Content | safeHtml"就能正确渲染出带<p>标签的段落内容，而不是显示一堆转义后的文本啦！

内容来源于stack exchange