Comment résoudre l'avertissement lors de la liaison du contenu HTML dans Angular4

Cet article vous présente principalement comment gérer les avertissements lors de la liaison de contenu HTML dans Angular4. L'article le présente en détail à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de chacun. Les amis qui en ont besoin suivent ci-dessous. apprendre ensemble. J'espère que cela aide tout le monde.

Avant-propos

Comme nous le savons tous, dans le développement Web front-end, nous rencontrons souvent le besoin de lier dynamiquement certaines chaînes HTML du backend ou d'épissage dynamique à l'affichage DOM de la page, en particulier dans Système de gestion de contenu (CMS : abréviation de Content Management System), de tels besoins sont partout. Mais récemment, un avertissement est apparu lors de la liaison du contenu HTML dans Angular4. Il a finalement été résolu en recherchant des informations pertinentes. Partageons-le avec des amis qui ont également rencontré ce problème, jetons un coup d'œil à l'introduction détaillée.

Lier le contenu HTML

Si vous utilisez la méthode normale pour lier, vous pouvez recevoir ce genre d'avertissement

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

Et rien ne sera affiché sur la page Venez.

J'en ai trouvé sur Internet et j'ai dit que je devais écrire des instructions pour le transférer. C'est très gênant. J'ai aussi trouvé un moyen sur le site officiel.
bypassSecurityTrustHtml Utilisez ceci pour effectuer la conversion de l'installation.

Convertissez le contenu ou le champ de contenu dans le résultat renvoyé. Bien sûr, si vous souhaitez utiliser bypassSecurityTrustHtml, vous devez toujours vous fier à l'injection du service DomSanitizer.

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

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

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

Recommandations associées :

Exemple de code pour afficher les styles CSS dans Angular4

Explication détaillée de la méthode d'implémentation d'un composant Angular4 FormText complet

Dans Angular4 Opérations de préparation de projet et de configuration de l'environnement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!