Exemple de code pour afficher les styles CSS dans Angular4

Cet article vous présente principalement les informations pertinentes sur le style CSS pour afficher le contenu dans Angular 4. L'article le présente de manière très détaillée à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de chacun. si besoin, cela peut suivre Apprenons avec l'éditeur. J'espère que cela aide tout le monde.

Avant-propos

Avant de commencer le texte principal de cet article, jetons d'abord un coup d'œil au contenu associé à la sortie du texte balisé sur la page dans angulaire2. Afin d'éviter systématiquement les problèmes XSS, Angular. par défaut, Traiter toutes les valeurs comme non fiables. Lorsque des valeurs sont insérées dans le DOM à partir du modèle via des attributs (Property), des attributs d'éléments DOM (Attribte), des liaisons de classe CSS ou des expressions d'interpolation, Angular nettoiera ces valeurs (Sanitize Les valeurs non fiables sont codées). .

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

J'ai trouvé le problème

Tout le monde sait qu'il y a un attribut innerHTML dans Angulaire à 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>

affichera uniquement Hello World, et la police ne fera pas 30px, ce qui signifie que le style CSS n'aura aucun effet.

Solution

Personnaliser 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);
 }
}

Introduire le tube HtmlPipe dans le module requis

@NgModule({
 declarations: [
 HtmlPipe
 ]
})

Ajouter le nom du tube à innerHtml

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

Cela affichera le style CSS du contenu.

Recommandations associées :

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

Explication d'exemple de fonction de réponse de formulaire Angular4

Préparation de projet et opérations de création d'environnement en Angular4

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!