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

前言

众所周知在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 的图等，用上面代码转一下就可以了，就不会那那个错误了。
 }
}

总结

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

赞 (0)

相关推荐

  • 详解Angular.js数据绑定时自动转义html标签及内容

    angularJS在进行数据绑定时默认是以字符串的形式数据,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止html标签的注入攻击,但有时候需要,特别是从数据库读取带格式的文本时,无法正常的显示在页面中. 而要对html进行转义,则需要在数据绑定的html标签中使用ng-bind-html属性,该属性依赖与$sanitize,也就是需要引入angular-sanitize.js文件,并在module定义时注入该服务ngSanitize.比如: html: <span ng

  • AngularJS动态绑定HTML的方法分析

    本文实例讲述了AngularJS动态绑定HTML的方法.分享给大家供大家参考,具体如下: 在Web前端开发中,我们经常会遇见需要动态的将一些来自后端或者是动态拼接的HTML字符串绑定到页面DOM显示,特别是在内容管理系统(CMS:是Content Management System的缩写),这样的需求,更是遍地皆是. 对于对angular的读者肯定首先会想到ngBindHtml,对,angular为我们提供了这个指令来动态绑定HTML,它会将计算出来的表达式结果用innerHTML绑定到DOM.

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

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

  • AngularJS全局警告框实现方法示例

    本文实例讲述了AngularJS全局警告框实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi

  • 关于动态生成dom绑定事件失效的原因及解决方法

    之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试了一下: 1. 事件失效的原因: (1)bind事件绑定只对dom中存在的元素有效,对于我们后来动态增加的元素是监测不到,所以绑定不了 (2)同样,当你使用var aa = document.getElementsByTagName("动态生成的元素");来获取动态生成的元素的时候也是获取

  • 把多个JavaScript函数绑定到onload事件处理函数上的方法

    为了让函数只在页面加载完毕后才得到执行,我们会把函数绑定到onload事件上: window.onload = userFunction 但如果有两个函数:firstFunction() 和 secondFunction(),都想让它们在页面加载完毕后得到执行,该怎么办?如果这样: window.onload = firstFunciton; window.onload = secondFunction; 只有最后一个函数能被执行.由此可得:每个事件处理函数只能绑定一条指令. 但我们可以这样做:

  • 解决给dom元素绑定click等事件无效问题的方法

    之前一直遇到js插件生成的元素,click事件无效的问题,重新绑定也不行,终于找到解决方法,在此记下来. 同时加深对js事件处理机制的理解. 1. 事件被解绑 这种情况下一般不会导致click失效,但以下情况,click事件就失效了: $(function(){ $('.btn').unbind() }) $('.btn').click(function(){ //... }) 所以,click事件要有个好习惯: $(function(){ $('.btn').click(function(){

  • 基于vue 开发中出现警告问题去除方法

    基于vue 开发中出现警告问题去除方法

    出现这个警告问题的时候 我们可以去main.js中在头部添加这句话: Vue.config.productionTip = false 这样即可去除警告! 以上这篇基于vue 开发中出现警告问题去除方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 使用vue.js开发时一些注意事项 Vue开发过程中遇到的疑惑知识点总结

  • vue判断input输入内容全是空格的方法

    比如input中的数据和data中的msg双向绑定. 那么我们可以  判断先把msg以空格拆分成数组,然后拼接起来,判断字符串的长度,如果长度为0,证明输入的就全是空格了,如下: msg.split(" ").join("").length = 0 以上这篇vue判断input输入内容全是空格的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: vue获取input输入值的问题解决办法 详解.vue文件中监听in

  • Python3 pip3 list 出现 DEPRECATION 警告的解决方法

    需要在 ~/.pip/pip.conf 配置文件中加入下面的语句,避免这类警告: 没有目录或没有配置文件需要自己新建 mkdir ~/.pip/ cd ~/.pip touch pip.conf vi pip.conf 添加 [list] format=columns 以上这篇Python3 pip3 list 出现 DEPRECATION 警告的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Ruby on rails安装后去掉DL is deprecated,please use Fiddle警告信息的方法【测试可用】

    Ruby on rails安装后去掉DL is deprecated,please use Fiddle警告信息的方法【测试可用】

    本文实例讲述了Ruby on rails安装后去掉DL is deprecated,please use Fiddle警告信息的方法.分享给大家供大家参考,具体如下: 问题: 搭建完完ruby on rails环境之后发现每次运行命令总会有这样一个Warning:DL is deprecated, please use Fiddle,例如: 对运行什么的没有影响,只是Dl过时了,可是Ruby大大不管这个问题,可是看着就烦呐~~ 解决方法(from stackflow): 找到安装目录D:\Rai

  • jQueryMobile之窗体长内容的缺陷与解决方法实例分析

    jQueryMobile之窗体长内容的缺陷与解决方法实例分析

    本文实例讲述了jQueryMobile窗体长内容的缺陷与解决方法.分享给大家供大家参考,具体如下: 前面的一篇文章<jQueryMobile之Helloworld与页面切换的方法>没有考虑到窗体中放置长内容的状况 一旦窗体中出现长内容,使用笔者那种固定header与footer的全屏布局是存在缺陷的, 如图所示,长内容最后的内容,直到滚动条拉到最底部也无法穷尽, 而且很有可能的是,虽然现在这个地方的内容是显示为半透明,但往往这个位置是一些提交按钮什么的, 用户根本就没法点, 因此,需要进行改进

随机推荐