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 的博客  感谢


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM