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 相关文章推荐
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
vue.js实现条件渲染的实例代码
Jun 22 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
AngularJS service之select下拉菜单效果
Jul 28 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
express express-session的使用小结
Dec 12 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 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
模拟xcopy的函数
2006/10/09 PHP
PHP6 mysql连接方式说明
2009/02/09 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
python多线程分块读取文件
2019/08/29 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
2014年计划生育协会工作总结
2014/11/14 职场文书
社区国庆节活动总结
2015/03/23 职场文书
2016年党建工作简报
2015/11/26 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python
Python使用MapReduce进行简单的销售统计
2022/04/22 Python