Preface
As we all know, in web front-end development, we often encounter the need to dynamically bind some HTML strings from the back-end or dynamically spliced to the page DOM display, especially in the content management system (CMS: is the abbreviation of Content Management System). Such needs are everywhere. However, there was a warning recently when Angular4 binds html content. It was finally solved by searching for relevant information. Let’s share it with friends who also encounter this problem. Let’s not say much, let’s take a look at the detailed introduction together.
Bind html content
If you use normal methods to bind, you may issue another warning
<div [innerHTML]="Catcha" ></div> --------------------------------------- WARNING: sanitizing HTML stripped some content (see /ng/security#xss).
And there is no thing on the page.
I found some online and said I wanted to write instructions to transfer them. It was so troublesome, and I also found a way from the official website.
bypassSecurityTrustHtml Use this to perform installation conversion.
In the returned result, the content or content field is converted. Of course, if you want to use bypassSecurityTrustHtml, you still need to rely on the injection of the DomSanitizer service.
import { DomSanitizer } from '@angular/platform-browser';
export class myPage1{
constructor(private sanitizer: DomSanitizer) {
}
onInit():void{
= ('What to convert');
// For example, if you return an html content or other pictures like svg, just use the above code to turn it over, and that error will not be possible. }
}
Summarize
The above is the entire content of this article. I hope that the content of this article has a certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.