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

更新时间：2017年11月03日 11:29:26 作者：xiaotuni

这篇文章主要给大家介绍了关于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 的图等，用上面代码转一下就可以了，就不会那那个错误了。
 }
}

总结

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

您可能感兴趣的文章:

AngularJS压缩JS技巧分析
这篇文章主要介绍了AngularJS压缩JS的操作技巧,分析了AngularJS进行压缩（minify）之后出现的问题与相应的解决方法,需要的朋友可以参考下
2016-11-11
Angular.Js的自动化测试详解
当Angular项目的规模到达一定的程度，就需要进行测试工作了。为什么要自动化测试？1，提高产出质量。2，减少重构时的痛。反正我最近重构多了，痛苦经历多了。3，便于新人接手。下面这篇文章就给大家详细介绍了Angular.Js的自动化测试，有需要的朋友们可以参考借鉴。
2016-12-12
Angular 结合 dygraphs 实现 annotation功能
这篇文章主要介绍了Angular 结合 dygraphs 实现 annotation,本文，我们直接结合 Angular 来演示，如何通过 dygraphs 实现折线图上的 annotation 的功能，需要的朋友可以参考下
2022-08-08
AngularJS自定义插件实现网站用户引导功能示例
这篇文章主要介绍了AngularJS自定义插件实现网站用户引导功能,结合实例形式分析了AngularJS自定义插件的实现步骤与相关功能技巧,需要的朋友可以参考下
2016-11-11
详解Angular Reactive Form 表单验证
本文我们将介绍 Reactive Form 表单验证的相关知识，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
AngularJS中的指令实践开发指南(二)
这篇文章主要介绍了AngularJS中的指令实践指南(二)的相关资料,需要的朋友可以参考下
2016-03-03
Angular.js中angular-ui-router的简单实践
本篇文章主要介绍了Angular.js中angular-ui-router的简单实践，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
详解angularJS自定义指令间的相互交互
本篇文章主要介绍了详解angularJS自定义指令间的相互交互，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
Angular 2应用的8个主要构造块有哪些
这篇文章主要为大家详细介绍了Angular 2应用的8个主要构造块,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
AngularJS ng-controller 指令简单实例
本文主要介绍AngularJS ng-controller 指令,这里对ng-controller指令资料的整理,并附代码示例和效果图,有需要的朋友看下
2016-08-08