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 &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
javascript 数组的方法集合
Jun 05 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
关于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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
php 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
php生成验证码函数
2015/10/20 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
jQuery事件详解
2017/02/23 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
财务总监管理岗位职责
2014/03/08 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
安全标兵事迹材料
2014/08/17 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书