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 相关文章推荐
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
js单词形式的运算符
May 06 Javascript
Javascript函数式编程语言
Oct 11 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 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
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
php中的ini配置原理详解
2014/10/14 PHP
PHP 快速排序算法详解
2014/11/10 PHP
php内嵌函数用法实例
2015/03/20 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
jQuery搜索同辈元素方法
2015/02/10 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
小程序采集录音并上传到后台
2019/11/22 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
浅析Git版本控制器使用
2017/12/10 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
幼儿园门卫岗位职责
2014/02/14 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python