Angular用[innerHTML]显示html文本，保留富文本在html中的行内style样式(SafeHtmlPipe)

项目中经常需要用到富文本组件，我使用的一个轻量级的富文本组件是Trumbowyg，压缩后文件很小。编辑文本后，显示也是一个问题。

一段文字在轻量级文本编辑器中展示如下：
在ts中模拟此富文本：

import {Component, OnInit} from '@angular/core'

@Component({
  selector: 'app-inner-html',
  templateUrl: './inner-html.component.html',
  styleUrls: ['./inner-html.component.less']
})
export class InnerHtmlComponent implements OnInit {
  richText = `
  <p>1、<strong style="color: rgb(192, 80, 77);">ECMAScript</strong> 和 
  <strong style="color: rgb(192, 80, 77);">JavaScript</strong> 的关系
</p>
<p>
  <em>一个常见的问题是，<span style="color: rgb(192, 80, 77);">ECMAScript</span>
  和<span style="color: rgb(192, 80, 77);">JavaScript</span> 到底是什么关系？
  </em>
</p>
  `

  constructor() {
  }

  ngOnInit(): void {
  }

}

html中显示：

<h3>显示html文本</h3>
<div class="text" [innerHTML]="richText"></div>

效果：

会发现跟在文本编辑器中表现不一致，打开 浏览器 检查-Elements 查看源码发现内联的style消失了，

这时我们需要添加一个safeHtmlPipe，并在AppModule的declarations数组中声明：

// safe-html.pipe.ts
import {Pipe, PipeTransform} from '@angular/core'
import {DomSanitizer} from '@angular/platform-browser'

/*
 * 为了不使html去掉其中的style 样式
 */
@Pipe({name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {
  }

  transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html)
  }
}

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

@NgModule({
  declarations: [
    ...
    SafeHtmlPipe,
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

修改inner-html.component.html；

<div class="text" [innerHTML]="richText | safeHtml"></div>

最终效果：