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 = `
  
1、ECMAScript 和 
  JavaScript 的关系


  一个常见的问题是，ECMAScript
  和JavaScript 到底是什么关系？
  

  `

  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>

最终效果：