Angular 4中如何显示内容的CSS样式示例代码


Posted in Javascript onNovember 06, 2017

前言

在开始本文的正文之前,我们先来看一下angular2中将带标签的文本输出在页面上的相关内容,为了系统性的防范XSS问题,Angular默认把所有值都当做不可信任的。 当值从模板中以属性(Property)、DOM元素属性(Attribte)、CSS类绑定或插值表达式等途径插入到DOM中的时候, Angular将对这些值进行无害化处理(Sanitize),对不可信的值进行编码。

h3>Binding innerHTML</h3>

<p>Bound value:</p>

<p
class="e2e-inner-html-interpolated">{{htmlSnippet}}</p>

<p>Result of binding to innerHTML:</p>

<p
class="e2e-inner-html-bound" [innerHTML]="htmlSnippet"></p>
[innerHTML]="htmlSnippet"

这个属性可以识别 HTML标签 但不识别标签中的属性值

发现问题

大家都知道Angular 中有 innerHTML 属性来设置要显示的内容,但是如果内容包含 CSS 样式,无法显示样式的效果。

比如:

public content: string = "<div style='font-size:30px'>Hello Angular</div>";

<p [innerHTML]="content"></p>

只会显示 Hello World ,字体不会是 30px,也就是 CSS 样式没有效果。

解决方案

自定义一个 Pipe 来对内容做转换。看下面代码。

写一个 HtmlPipe 类

import {Pipe, PipeTransform} from "@angular/core";
import {DomSanitizer} from "@angular/platform-browser";

@Pipe({
 name: "html"
})

export class HtmlPipe implements PipeTransform{

 constructor (private sanitizer: DomSanitizer) {

 }

 transform(style) {
 return this.sanitizer.bypassSecurityTrustHtml(style);
 }
}

在需要的模块里面引入管道 HtmlPipe

@NgModule({
 declarations: [
 HtmlPipe
 ]
})

在 innerHtml 中增加管道名字

<p [innerHTML]="content | html"></p>

这样就可以显示 content 的 CSS 样式。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 基本概念
Jan 20 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 Javascript
详解基于vue-cli优化的webpack配置
Nov 06 #Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 #Javascript
js中apply与call简单用法详解
Nov 06 #Javascript
js实现简单数字变动效果
Nov 06 #Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 #Javascript
原生js封装添加class,删除class的实例
Nov 06 #Javascript
Node.js实现发送邮件功能
Nov 06 #Javascript
You might like
从手册去理解分析PHP session机制
2011/07/17 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
javascript调试说明
2010/06/07 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
python动态性强类型用法实例
2015/05/09 Python
python字符串的常用操作方法小结
2016/05/21 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
小学教学工作总结2015
2015/05/13 职场文书
深入理解python协程
2021/06/15 Python
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python