angular2/4 使用[innerHTML]时样式不生效

首先默认情况下，innerHTML会被认为是不安全的，因此屏蔽掉了样式。

不生效场景

我们通过innerHTML引入一段html格式的文本，文本中有style样式，目标是希望字体是红色的，而实际效果却仍然是默认的黑色。

TS文件

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-inner-html',
  templateUrl: './inner-html.component.html',
  styleUrls: ['./inner-html.component.css']
})
export class InnerHtmlComponent implements OnInit {
  constructor() { }
  content = '<span>'+
  				'<strong>'+
  					'<span style="font-size: 50px;color:red">'+
  						'把啦啦啦'+
  					'</span>'+
  				'</strong>'+
  			'</span>'
  ngOnInit() {
  }
}

html文件:

<div [innerHTML]="content"></div>

未达到预期，仍是黑色字体，效果图：

通过管道转义

import {Pipe, PipeTransform} from "@angular/core";
import {DomSanitizer} from "@angular/platform-browser";
@Pipe({
 name: "html"
})
export class HtmlPipe implements PipeTransform{
 constructor (private sanitizer: DomSanitizer) {
 }
 transform(style) {
 return this.sanitizer.bypassSecurityTrustHtml(style);
 }
}

然后在app.module中引入一下:

import { HtmlPipe } from './inner-html/html.pipe';
@NgModule({
  declarations: [
    ...
    HtmlPipe, 
    ...
  ],

最后在html文件中使用:

<div [innerHTML]="content | html"></div>

这次生效了，效果如下：