Afficher les styles CSS dans Angular 4

Cette fois, je vais vous expliquer comment afficher les styles CSS dans Angular 4. Quelles sont les précautions pour afficher les styles CSS dans Angular 4. Ce qui suit est un cas pratique, jetons un coup d'oeil .

Avant de commencer le texte principal de cet article, examinons d'abord le contenu pertinent de la sortie du texte balisé sur la page dans angulaire2 Afin d'éviter systématiquement les problèmes XSS, Angular traite toutes les valeurs comme non fiables. par défaut de. Lorsque la valeur est insérée dans le DOM à partir du modèle via des attributs (Property), des attributs d'élément DOM (Attribte), une classe CSS une liaison ou une interpolation expression, etc., Angular nettoiera ces valeurs et encodera les valeurs non fiables.

h3>Binding innerHTML</h3>
<p>Bound value:</p>
<p
class="e2e-inner-html-interpolated">{{htmlSnippet}}</p>
<p>Result of binding to innerHTML:</p>
<p
class="e2e-inner-html-bound" [innerHTML]="htmlSnippet"></p>

[innerHTML]="htmlSnippet"

Cet attribut peut reconnaître la balise HTML mais pas la valeur de l'attribut dans la balise

Problème trouvé

Tout le monde sait qu'Angular possède la propriété innerHTML pour définir le contenu à afficher, mais si le contenu contient des styles CSS, l'effet des styles ne peut pas être affiché.

Par exemple :

public content: string = "<p style=&#39;font-size:30px&#39;>Hello Angular</p>";
<p [innerHTML]="content"></p>

Seul Hello World sera affiché et la police ne fera pas 30 pixels, ce qui signifie que le style CSS n'aura aucun effet.

Solution

Personnalisez un Pipe pour convertir le contenu. Regardez le code ci-dessous.

Écrire une classe HtmlPipe

import {Pipe, PipeTransform} from "@angular/core";
import {DomSanitizer} from "@angular/platform-browser";
@Pipe({
 name: "html"
})
export class HtmlPipe implements PipeTransform{
 constructor (private sanitizer: DomSanitizer) {
 }
 transform(style) {
 return this.sanitizer.bypassSecurityTrustHtml(style);
 }
}

Introduisez le tube HtmlPipe dans le module requis

@NgModule({
 declarations: [
 HtmlPipe
 ]
})

Ajoutez le nom du tuyau dans innerHtml

<p [innerHTML]="content | html"></p>

Cela affichera le style CSS du contenu.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

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!