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 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
js实现继承的方法及优缺点总结
May 08 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
toString.call()通用的判断数据类型方法示例
Aug 28 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全角字符转换为半角函数
2014/02/07 PHP
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
js跳转页面方法总结
2014/01/29 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
Python2.x中文乱码问题解决方法
2015/06/02 Python
Python字符串格式化输出方法分析
2016/04/13 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
python多线程抽象编程模型详解
2019/03/20 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
如何在django中实现分页功能
2020/04/22 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
本科生求职简历的自我评价
2013/10/21 职场文书
项目开发计划书
2014/01/09 职场文书
初中校园之声广播稿
2014/01/15 职场文书
公司股权转让协议书
2014/04/12 职场文书
培训讲师岗位职责
2014/04/13 职场文书
参赛口号
2014/06/16 职场文书
计划生育宣传标语
2014/06/21 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
nginx优化的六点方法
2021/03/31 Servers