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 相关文章推荐
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
jQuery函数的等价原生函数代码示例
May 27 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
基于Vue的移动端图片裁剪组件功能
Nov 28 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 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
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
php查询ip所在地的方法
2014/12/05 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
php生成二维码
2015/08/10 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
PHP反射实际应用示例
2019/04/03 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
自己的js工具 Cookie 封装
2009/08/21 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
python中readline判断文件读取结束的方法
2014/11/08 Python
python文件写入实例分析
2015/04/08 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
python3实现点餐系统
2019/01/24 Python
django 模型字段设置默认值代码
2020/07/15 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
全神贯注教学反思
2014/02/03 职场文书
企业安全生产承诺书
2014/05/22 职场文书
图书馆标语
2014/06/19 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
初中语文教师研修日志
2015/11/13 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
Python time库的时间时钟处理
2021/05/02 Python
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android