在 Angular 2 的组件中如何插入带行内样式的 html

想必大家都知道出于安全的考虑，angular 会把所有输入变量的内容视为不安全的，也就是所有输入变量的内容会被过滤；

带 js, css 都是视为不安全的，angular 会自动把视为不安全的字符串过滤掉。

如果想想插入带样式的 HTML ，那么必须要告诉 angular 我传给你的字符串是安全。

闲话少说，直接上代码。

插入html 使用 输入属性 [innerHtml]="htmlContent"

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  html: any;

  constructor(private sanitizer: DomSanitizer) {
    this.html = sanitizer.bypassSecurityTrustHtml(`<span style=\"color:red;\">1234</span>`);
  }
}

app.component.html

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