angular innerHtml内容增加样式

问题：使用innerHtml属性赋值一段html片段时，片段中的样式css会被忽略。

解决：可使用DomSanitizer将其转化一下。这里定义了一个pipe，具体如下：

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

// https://angular.io/guide/security
@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitized: DomSanitizer) { }

  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

则可以实现对展示内容的自定义样式。

  htmlStr = `
    <h1>innerHtml内容</h1>
    <h2 style="color: #1b75bb;">样式自定义</h2>
  `

<div [innerHtml]="htmlStr | safeHtml"></div>

结果：