Exemple de code de style CSS expliquant comment afficher le contenu 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 tous les amis qui en ont besoin. suivez les instructions ci-dessous. Apprenons ensemble. 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. Lorsqu'une valeur est insérée dans le DOM à partir du modèle via des attributs (Propriétés), des attributs d'éléments DOM (Attribte), des liaisons de classe CSS ou des expressions d'interpolation, 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 les balises HTML mais pas les valeurs d'attribut dans les balises

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.

Recommandations associées ;

Angular obtient le fichier json défini dans le projet

Quelles sont les méthodes intégrées d'angularjs

Introduction à la fonction de validation de formulaire utilisant AngularJS

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!