Angular 7 innerHTML无法显示已保存文本及背景颜色求助

这个问题我之前帮不少开发者解决过，核心原因是Angular的安全策略在搞怪！Angular默认的DomSanitizer会对通过innerHTML绑定的HTML内容做严格的安全校验，内联style里的颜色、背景色样式会被判定为潜在不安全内容直接过滤掉，而字号、加粗这些属于标签自带的格式，所以能正常显示。

下面给你两种实用的解决方法：

方法一：组件内直接处理（快速解决） #

首先在你的组件文件里引入DomSanitizer和SafeHtml：

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

然后在组件类里注入这个服务，写个方法专门处理富文本内容：

export class YourComponent {
  // 注入DomSanitizer服务
  constructor(private sanitizer: DomSanitizer) {}

  // 把原始HTML转换成Angular认可的安全格式
  getSafeCommentContent(element: any): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(element.Comments);
  }
}

最后在模板里用这个方法代替直接绑定：

<div [innerHTML]="getSafeCommentContent(element)"></div>

方法二：创建可复用的安全管道（推荐） #

如果你的项目里多个地方都需要处理这类富文本，做个管道会更省心，复用性强：

1. 先通过命令行生成管道文件：

ng generate pipe safe-html

2. 打开生成的safe-html.pipe.ts，替换成下面的代码：

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(htmlContent: string): SafeHtml {
    // 把传入的HTML内容标记为安全，允许Angular渲染所有样式
    return this.sanitizer.bypassSecurityTrustHtml(htmlContent);
  }
}

3. 别忘了在你的模块里声明这个管道，不然Angular识别不了：

import { SafeHtmlPipe } from './safe-html.pipe';

@NgModule({
  declarations: [
    // ... 你的其他组件、指令
    SafeHtmlPipe
  ]
})
export class YourModule {}

4. 现在模板里直接用管道处理就行，代码更简洁：

<div [innerHTML]="element.Comments | safeHtml"></div>

重要提醒！ #

一定要确保你要渲染的富文本内容是完全可信的！比如是你自己系统生成的、经过过滤的内容。如果内容来自用户输入，一定要先做严格的XSS防护，不然直接用bypassSecurityTrustHtml会有安全风险哦。

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