Angular4绑定html内容出现警告的处理方法


Posted in Javascript onNovember 03, 2017

前言

众所周知在Web前端开发中,我们经常会遇见需要动态的将一些来自后端或者是动态拼接的HTML字符串绑定到页面DOM显示,特别是在内容管理系统(CMS:是Content Management System的缩写),这样的需求,更是遍地皆是。但是最近在Angular4绑定html内容的时候出现了警告,通过查找相关资料终于解决了,下面给同样遇到这个问题的朋友们分享下,话不多说了,来一起看看详细的介绍吧。

绑定html内容

如果用正常的方法去绑定的话,可能会出再这种警告

<div [innerHTML]="Catcha" ></div>
--------------------------------------- 
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

而且页面上也显示不出东西来。

在网上找了一些,说要写指令对其进行转,好麻烦,从官网也找到一个种办法。
bypassSecurityTrustHtml 用这个来进行安装转换。

在返回的结果对内容,或内容字段进行转换,当然要使用 bypassSecurityTrustHtml 的话,还是要依赖注入 DomSanitizer 服务,

import { DomSanitizer } from '@angular/platform-browser';

export class myPage1{
 constructor(private sanitizer: DomSanitizer) {
 }

 onInit():void{
  this.Catcha = this.sanitizer.bypassSecurityTrustHtml('要进行转换的内容');
  // 这里比如返回的一个html内容,或是其它如一张 svg 的图等,用上面代码转一下就可以了,就不会那那个错误了。
 }
}

总结

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

Javascript 相关文章推荐
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
js仿iphone秒表功能 计算平均数
Jan 11 Javascript
深入理解ES7的async/await的用法
Sep 09 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 #Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 #Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 #jQuery
nginx配置React静态页面的方法教程
Nov 03 #Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 #Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 #Javascript
基于ES6作用域和解构赋值详解
Nov 03 #Javascript
You might like
PHP 缓存实现代码及详细注释
2010/05/16 PHP
php实现文件下载更能介绍
2012/11/23 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
python 读写中文json的实例详解
2017/10/29 Python
python如何修改装饰器中参数
2018/03/20 Python
Python 字符串与数字输出方法
2018/07/16 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
python不同系统中打开方法
2020/06/23 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
法国在线药房:1001Pharmacies
2021/03/07 全球购物
采购部部长岗位职责
2014/02/06 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
python scrapy简单模拟登录的代码分析
2021/07/21 Python
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技