angular innerHtml用法以及内容增加样式

1. 作用：在页面中显示html文本

（1） htmlStr = "<div>&lt;a&ensp;href=\"https://www.baidu.com/\"&gt;&lt;/a&gt;</div>"

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

        显示：<a href="https://www.baidu.com/"></a>

（2）htmlStr = "<a href="https://www.baidu.com/">baidu</a>"

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

        显示：baidu   （可点击的超链接）

2. 问题：使用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>

结果