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 相关文章推荐
简约JS日历控件 实例代码
Jul 12 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
javascript常用函数(1)
Nov 04 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
利用PHP实现递归删除链表元素的方法示例
Oct 23 Javascript
JavaScript实现刮刮乐效果
Nov 01 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的宝库目录--PEAR
2006/10/09 PHP
php 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
python计数排序和基数排序算法实例
2014/04/25 Python
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
Python实现excel转sqlite的方法
2017/07/17 Python
python爬虫使用cookie登录详解
2017/12/27 Python
Python多层装饰器用法实例分析
2018/02/09 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
采购主管工作职责
2013/12/12 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
python基础之类方法和静态方法
2021/10/24 Python