html方法标签不起作用,Angular中innerHTML标签的样式不起作用的原因解析
1.背景
在最近angular的项目中,需要用到[innerHTML]标签来指定一个div的样式:
//HTML部分
//TS部分
contents = '
商品信息栏位商品信息介绍
';
但是上面的样式并不起作用,在Chorme中查看源码,发现style标签的样式在Angular编译的时候被屏蔽掉。这是为什么呢?客观别急,请往下看。
2.解决方案
先说解决方案,最后再分析出现这种问题的原因。修改上面的TS:
// 在使用的页面引入DomSanitizer
import { DomSanitizer } from '@angular/platform-browser';
//构造方法里注入sanitizer对象
constructor( private sanitizer: DomSanitizer
) { }
// 对HTML代码做处理
this.contents= this.sanitizer.bypassSecurityTrustHtml("
W3商品信息栏位商品信息介绍
");
这样虽然可以解决问题,但是这样做还不够:
•代码冗余繁杂:如果我们的contents内容过大,这样我们的代码就显得很乱,影响可读性和美观;
•不能复用:如果其他ts中也要用到innerHTML标签,又要重新写一遍上面的TS内容,没有复用性;
基于以上两点,我们用自定义管道(pipe)来优化以上代码,使用ng generate pipe safe-html命令来生成一个pipe,并做适当的修改:
// 对safe-html.pipe.ts做适当修改
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);
}
}
// 在使用innerHTML标签的属性里使用以上safeHtml管道
3.原因及原理
所以,为什么会出现上面的问题呢?原来,Angular中默认将所有输入值视为不受信任。当我们通过 property,attribute,样式,类绑定或插值等方式,
将一个值从模板中插入到DOM中时,Angular会自帮我们清除和转义不受信任的值。在开头的例子中,span标签里的样式被屏蔽了,不信请看:
Angular 在编译的时候,会自动清理 HTML 输入并转义不安全的代码,因此在这种情况下,style被屏蔽,样式失效。这时候如果需要将样式片段渲染出来,
就需要用到DomSanitizer了。DomSanitizer 可以把值净化为在不同 DOM 上下文中的安全内容,来帮我们防范跨站脚本攻击(XSS)类的安全问题。
总结
以上所述是小编给大家介绍的Angular中innerHTML标签的样式不起作用的原因解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣的文章:AngularJS标签页tab选项卡切换功能经典实例详解
Angular5给组件本身的标签添加样式class的方法
AngularJS 打开新的标签页实现代码
Angular.js中ng-include用法及多标签页面的实现方式详解
AngularJs页面筛选标签小功能
angularjs自定义ng-model标签的属性
html方法标签不起作用,Angular中innerHTML标签的样式不起作用的原因解析相关推荐
- 在html中base的作用,html中base标签的作用是什么
html中base标签的作用是什么? 作用:为页面上的所有链接规定默认地址或默认目标,是一种表达路径和连接网址的标签. 说明:通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 UR ...
- html标签详细讲解,HTML语法中的标签详细讲解1
对标签的总结: 头信息标签 主体内容标签 换行标签 水平线标签 居中对齐标签 字体标签 段落标签 格式化标签 引用标签 HTML注释语法 字符控制标签 标题文字标签 ~ 列表标签 . . table表 ...
- vue中修改Element ui样式不起作用
公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...
- 奶粉中含PHP作用,奶粉中的益生菌有什么作用
大多数的奶粉都能够提供足够的营养,而且奶粉中的营养不全是一样的,有些品牌的奶粉加入一些其他品牌没有的物质,就成为了这个品牌的特色,而这些物质通常都是对人体有益的,益生菌就是对人体有益的菌类,那么奶粉中 ...
- echart饼图标签重叠_解决echarts中饼图标签重叠的问题
饼图中的series有个avoidLabelOverlap属性, avoidLabelOverlap:是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠. ...
- java中的class 类的作用_Java中Class和单例类的作用与类成员的理解
Java中Class类的作用与深入理解 在程序运行期间,Java运行时系统始终为所有的对象维护一个被称为运行时的类型标识.这个信息跟踪着每个对象所属的类.JVM利用运行时信息选择相应的方法执行.而保存 ...
- a标签去掉下划线_html中a标签的一些用法
来看一些a标签的常见用法,觉得有用的话,点个赞哦. 跳转到指定位置(锚点) 在href中填入#再加上某一标签的id则可以跳转至该标签,如果#后面任何id,那就会回到顶部,这个在很多网站都很常见,如果h ...
- php 获取日期标签的值,在php中获取标签的选定索引值
我试图从< select>中获取所选值在 PHP中标记,但我收到错误. 这就是我所做的, HTML Select Male Female PHP脚本 $Gender = $_POST[&q ...
- Angular 个人深究(一)【Angular中的Typescript 装饰器】
Angular 个人深究[Angular中的Typescript 装饰器] 最近进入一个新的前端项目,为了能够更好地了解Angular框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己 ...
最新文章
- java方法区内存泄露_深入理解java虚拟机-第二章:java内存区域与内存泄露异常...
- 他们隔空协作,打造出懂医学、知开源的智能机器人
- 2015下半年软考系统集成管理工程师10月8日作业
- 成员变量和属性区别(@property那点事儿)
- Python 3.x 格式化输出字符串 % format 笔记
- 《C语言及程序设计》实践参考——乘法口诀表
- WeihanLi.Npoi 1.20.0 Released
- ElasticSearch初学者教程
- Requests库实战(一)---网页采集器
- mysql2017windows安装_mysql的windows安装
- Spring—使用类加载从配置文件中读取配置
- Linux——安装之磁盘分区
- git-stash简单用法
- LeetCode数据库 176. 第二高的薪水
- xtile 下载_Stata: gen 命令中的 group() 函数的潜在风险
- [求助]关于服务器之间的文件拷贝问题,没有头绪,希望大家指点一二
- TARA-威胁建模方案1
- Python 开发个人微信号在运维开发中的使用
- 机器学习面试题之逻辑回归(二)
- 左侧颜面部起疱,疼痛剧烈2天-牙博士