How to solve the warning when binding html content in Angular4

This article mainly introduces to you how to deal with warnings when binding HTML content in Angular4. The article introduces it in great detail through sample code. It has certain reference learning value for everyone's study or work. Friends who need it follow below. Let’s learn together. Hope it helps everyone.

Preface

As we all know, in Web front-end development, we often encounter the need to dynamically bind some HTML strings from the backend or dynamic splicing to the page DOM display, especially in Content management system (CMS: the abbreviation of Content Management System), such needs are everywhere. But recently, a warning appeared when binding html content in Angular4. It was finally solved by searching for relevant information. Let’s share it with friends who also encountered this problem. Without further ado, let’s take a look at the detailed introduction.

Bind html content

If you use the normal method to bind, you may get this kind of warning

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

And nothing will be displayed on the page.

I found some on the Internet and said that I need to write instructions to transfer it. It is very troublesome. I also found a way from the official website.
bypassSecurityTrustHtml Use this to perform installation conversion.

Convert the content or content field in the returned result. Of course, if you want to use bypassSecurityTrustHtml, you still need to rely on injecting the DomSanitizer service.

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

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

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

Related recommendations:

Sample code for displaying CSS styles in Angular4

Detailed explanation of the implementation method of a complete Angular4 FormText component

Project in Angular4 Preparation and environment setup operations

The above is the detailed content of How to solve the warning when binding html content in Angular4. For more information, please follow other related articles on the PHP Chinese website!