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 相关文章推荐
javascript实现九宫格相加数值相等
May 28 Javascript
Javascript之String对象详解
Jun 08 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
vue-hook-form使用详解
Apr 07 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 Javascript
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
如何在JavaScript中正确处理变量
Dec 25 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中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
JQuery 常用操作代码
2010/03/14 Javascript
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
浅析Python中的join()方法的使用
2015/05/19 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
python实现五子棋程序
2020/04/24 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
职业规划书如何设计?
2014/01/09 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
初中体育教学随笔
2015/08/15 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
年终工作总结范文
2019/06/20 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP