Angular中innerHTML标签的样式不起作用的原因解析


Posted in Javascript onJune 18, 2019

1.背景

         在最近angular的项目中,需要用到[innerHTML]标签来指定一个div的样式:

//HTML部分
 <div class="contents" [innerHTML]="contents"></div>

 //TS部分
 contents = '<p>商品信息栏位<br><span style="color:red;">商品信息介绍</span></p>';

        但是上面的样式并不起作用,在Chorme中查看源码,发现style标签的样式在Angular编译的时候被屏蔽掉。这是为什么呢?客观别急,请往下看。

2.解决方案

       先说解决方案,最后再分析出现这种问题的原因。修改上面的TS:

// 在使用的页面引入DomSanitizer 
 import { DomSanitizer } from '@angular/platform-browser';
//构造方法里注入sanitizer对象
 constructor( private sanitizer: DomSanitizer
 ) { }
// 对HTML代码做处理
 this.contents= this.sanitizer.bypassSecurityTrustHtml("<p>W3商品信息栏位<br><span style="color:red;">商品信息介绍</span></p>");

这样虽然可以解决问题,但是这样做还不够:

•代码冗余繁杂:如果我们的contents内容过大,这样我们的代码就显得很乱,影响可读性和美观;
•不能复用:如果其他ts中也要用到innerHTML标签,又要重新写一遍上面的TS内容,没有复用性;

      基于以上两点,我们用自定义管道(pipe)来优化以上代码,使用ng generate pipe safe-html命令来生成一个pipe,并做适当的修改:

// 对safe-html.pipe.ts做适当修改<br><br>import {Pipe, PipeTransform} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
@Pipe({name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
 constructor(private sanitized: DomSanitizer) {
 }
 transform(value) {
  return this.sanitized.bypassSecurityTrustHtml(value);
 }
}<br><br>// 在使用innerHTML标签的属性里使用以上safeHtml管道

<div class="contents" [innerHTML]="contents|safeHtml"></div>

3.原因及原理

           所以,为什么会出现上面的问题呢?原来,Angular中默认将所有输入值视为不受信任。当我们通过 property,attribute,样式,类绑定或插值等方式,

   将一个值从模板中插入到DOM中时,Angular会自帮我们清除和转义不受信任的值。在开头的例子中,span标签里的样式被屏蔽了,不信请看:

  

Angular中innerHTML标签的样式不起作用的原因解析

  Angular 在编译的时候,会自动清理 HTML 输入并转义不安全的代码,因此在这种情况下,style被屏蔽,样式失效。这时候如果需要将样式片段渲染出来,

 就需要用到DomSanitizer了。DomSanitizer 可以把值净化为在不同 DOM 上下文中的安全内容,来帮我们防范跨站脚本攻击(XSS)类的安全问题。

总结

以上所述是小编给大家介绍的Angular中innerHTML标签的样式不起作用的原因解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
vue实现在线翻译功能
Sep 27 Javascript
小程序click-scroll组件设计
Jun 18 #Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 #Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 #Javascript
JS删除String里某个字符的方法
Jan 06 #Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 #Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 #Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 #Javascript
You might like
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
javascript prototype 原型链
2009/03/12 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
Vue实现PopupWindow组件详解
2018/04/28 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
python 实现dict转json并保存文件
2019/12/05 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
Hibernate持久层技术
2013/12/16 面试题
语文教育专业应届生求职信
2013/11/23 职场文书
环保建议书600字
2014/05/14 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
求职信格式范文
2015/03/19 职场文书
小学德育工作总结2015
2015/05/12 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
党员读书活动心得体会
2016/01/14 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP