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

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

不生效场景

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

TS文件

import { Component, OnInit } from &＃39;&＃64;angular/core&＃39;;
&＃64;Component({selector: &＃39;app-inner-html&＃39;,templateUrl: &＃39;./inner-html.component.html&＃39;,styleUrls: [&＃39;./inner-html.component.css&＃39;]
})
export class InnerHtmlComponent implements OnInit {constructor() { }content &＃61; &＃39;&＃39;&＃43;&＃39;&＃39;&＃43;&＃39;&＃39;&＃43;&＃39;把啦啦啦&＃39;&＃43;&＃39;&＃39;&＃43;&＃39;&＃39;&＃43;&＃39;&＃39;ngOnInit() {}
}


html文件:

<div [innerHTML]&＃61;"content"></div>


未达到预期&＃xff0c;仍是黑色字体&＃xff0c;效果图&＃xff1a;

通过管道转义

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


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

import { HtmlPipe } from &＃39;./inner-html/html.pipe&＃39;;
&＃64;NgModule({declarations: [...HtmlPipe, ...],


最后在html文件中使用:

<div [innerHTML]&＃61;"content | html"></div>


这次生效了&＃xff0c;效果如下&＃xff1a;