详解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 相关文章推荐
location.search在客户端获取Url参数的方法
Jun 08 Javascript
javascript中的float运算精度实例分析
Aug 21 Javascript
js 链式延迟执行DOME
Jan 04 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
vue组件三大核心概念图文详解
May 30 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
vue的三种图片引入方式代码实例
Nov 19 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 开源框架22个简单简介
2009/08/24 PHP
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
python实现八大排序算法(1)
2017/09/14 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
办公室前台岗位职责
2014/01/04 职场文书
参观考察邀请函范文
2014/01/29 职场文书
售后客服工作职责
2014/06/16 职场文书
争先创优心得体会
2014/09/12 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
员工辞职信怎么写
2015/02/27 职场文书
个人专业技术总结
2015/03/05 职场文书
经营场所证明范本
2015/06/19 职场文书
公司食堂管理制度
2015/08/05 职场文书
演讲开头怎么书写?
2019/08/06 职场文书