So lösen Sie die Warnung beim Binden von HTML-Inhalten in Angular4

In diesem Artikel wird hauptsächlich der Umgang mit Warnungen beim Binden von HTML-Inhalten in Angular4 vorgestellt. Der Artikel stellt ihn anhand von Beispielcodes detailliert vor gemeinsam lernen. Ich hoffe, es hilft allen.

Vorwort

Wie wir alle wissen, stoßen wir bei der Web-Front-End-Entwicklung häufig auf die Notwendigkeit, einige HTML-Strings dynamisch vom Backend zu binden oder dynamisch an die DOM-Anzeige der Seite anzupassen, insbesondere in Content-Management-Systeme (CMS: die Abkürzung für Content Management System), solche Anforderungen gibt es überall. Aber vor Kurzem ist beim Binden von HTML-Inhalten in Angular4 eine Warnung aufgetaucht. Diese wurde schließlich durch die Suche nach relevanten Informationen behoben. Lassen Sie uns dies ohne weiteres mit Freunden teilen, die auf dieses Problem gestoßen sind.

HTML-Inhalt binden

Wenn Sie die normale Methode zum Binden verwenden, erhalten Sie möglicherweise diese Warnung

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

und auf der Seite wird nichts angezeigt.

Ich habe einige im Internet gefunden und gesagt, dass ich Anweisungen schreiben muss, um sie zu übertragen. Ich habe auch einen Weg von der offiziellen Website gefunden.
bypassSecurityTrustHtml Verwenden Sie dies, um die Installationskonvertierung durchzuführen.

Konvertieren Sie den Inhalt oder das Inhaltsfeld im zurückgegebenen Ergebnis. Wenn Sie bypassSecurityTrustHtml verwenden möchten, müssen Sie sich natürlich weiterhin auf die Injektion des DomSanitizer-Dienstes verlassen.

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

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

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

Verwandte Empfehlungen:

Beispielcode für die Anzeige von CSS-Stilen in Angular4

Detaillierte Erläuterung der Implementierungsmethode einer vollständigen Angular4 FormText-Komponente

In Angular4-Projektvorbereitungs- und Umgebungseinrichtungsvorgängen

Das obige ist der detaillierte Inhalt vonSo lösen Sie die Warnung beim Binden von HTML-Inhalten in Angular4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!