详解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 相关文章推荐
jQuery使用手册之一
Mar 24 Javascript
JavaScript入门教程(7) History历史对象
Jan 31 Javascript
Javascript 读书笔记索引贴
Jan 11 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
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 jQuery表单,带验证具体实现方法
2014/02/15 PHP
php简单的上传类分享
2016/05/15 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
python中zip和unzip数据的方法
2015/05/27 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
django如何自己创建一个中间件
2019/07/24 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
numba提升python运行速度的实例方法
2021/01/25 Python
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
师范应届生语文教师求职信
2013/10/29 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
应届毕业生自荐书
2014/06/18 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server