angular使用innerHtml时style行内样式消失

之前在项目中 有用到富文本编辑器  大部分富文本编辑器的本质是一段HTML  项目中的需求是将这部分html 以浏览方式显示出来

所以就想到了用innerHtml   但是实际用下去发现   html内容还在 但样式消失了

后面去网上查了下资料  才发现是因为angular使用innerHtml时style行内样式消失 大致原因是angular出于安全考虑 

解决方案则是要使用angular的一个DOM解释器    方式则是通过angular管道来对html进行格式化

 代码如下：

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);

}

}

 

上文中提到的资料来源于：https://me.csdn.net/jokren 的博客  感谢