详解angular如何调用HTML字符串的方法


Posted in Javascript onJune 30, 2018

前面的文章我们介绍过angular6.0的数据绑定,也就是前面页面如何调用后台的数据,我们接触到了调用普通数据——如:调用产品详情{{post.content}}。在使用中,我们会发现,如果按原来的方式angular6.0调用的数据是HTML字符串,前台页面显示的依然是html字符串,而没有正常显示,如下图:

详解angular如何调用HTML字符串的方法

这显示不是我们想要的结果。那么,angular6.0如何调用HTML字符串数据呢?

angular6.0提供了一个属性绑定来实现html字符串数据的绑定:

<ul [innerHTML]="post.content"></ul> 通过innerHTML属性绑定调用产品详情post.content

这时,产品详情页的数据已正常显示——图片文字都能正常显示出来。而这时,又出现一个问题,在页面控制台会有警告提示:WARNING: sanitizing HTML stripped some content  如下图:

详解angular如何调用HTML字符串的方法

页面能正常输出显示,可见这个警告对页面不影响。如果不介意,倒是可以忽略不计。但这对于我们开发者来说,毕竟不太如意,肯定是哪儿有问题呀。

这啥会出现这种情况?这是因为angular的保护措施,防止xss攻击。其实可以不不管它,毕竟不是错误。如果不想看到这种警告信息,可以把产品详情单独出来进行解析:

第一步:引入DomSanitizer

第二步:通过DomSanitizer来解析产品详情,并赋值给一个变量属性 post_content;

详解angular如何调用HTML字符串的方法

第三步:前台调用时,用innerHTML属性绑定这个post_content变量

详解angular如何调用HTML字符串的方法

通过这几部,问题解决。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript Window及document对象详细整理
Jan 12 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
DOM事件探秘篇
Feb 15 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 #Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 #Javascript
AngularJs分页插件使用详解
Jun 30 #Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 #Javascript
vue检测对象和数组的变化分析
Jun 30 #Javascript
浅析vue.js数组的变异方法
Jun 30 #Javascript
详解vue添加删除元素的方法
Jun 30 #Javascript
You might like
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
Pyramid添加Middleware的方法实例
2013/11/27 Python
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
J2EE面试题集锦(附答案)
2013/08/16 面试题
光电信息专业应届生求职信
2013/10/07 职场文书
爱情寄语大全
2014/04/09 职场文书
合作意向书
2014/07/30 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
门店店长岗位职责
2015/04/14 职场文书
写给同事的离职感言
2015/08/04 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书