Beispielcode im CSS-Stil für die Anzeige von Inhalten in Angular4

Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zum CSS-Stil zum Anzeigen von Inhalten in Angular 4 ein. Der Artikel stellt ihn ausführlich anhand von Beispielcode vor. Er hat einen gewissen Referenz- und Lernwert für alle, die ihn beim Lernen oder Arbeiten benötigen Befolgen Sie die nachstehenden Anweisungen. Lassen Sie uns gemeinsam lernen. Bevor wir mit dem Haupttext dieses Artikels beginnen, werfen wir zunächst einen Blick auf den relevanten Inhalt der Ausgabe von markiertem Text auf der Seite in Angular2. Um XSS-Probleme systematisch zu verhindern, behandelt Angular standardmäßig alle Werte als nicht vertrauenswürdig. Wenn Werte aus der Vorlage über Attribute (Eigenschaften), DOM-Elementattribute (Attribute), CSS-Klassenbindungen oder Interpolationsausdrücke usw. in das DOM eingefügt werden, Angular bereinigt diese Werte und codiert nicht vertrauenswürdige Werte.

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"

Dieses Attribut kann HTML-Tags erkennen, jedoch nicht die Attributwerte in den Tags

Problem gefunden

Jeder weiß, dass Angular über die innerHTML-Eigenschaft verfügt, um den anzuzeigenden Inhalt festzulegen. Wenn der Inhalt jedoch CSS-Stile enthält, kann die Wirkung der Stile nicht angezeigt werden.

Zum Beispiel:

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

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

Es wird nur Hello World angezeigt und die Schriftart ist nicht 30 Pixel groß, was bedeutet, dass der CSS-Stil keine Auswirkung hat.

Lösung

Passen Sie eine Pipe an, um Inhalte zu konvertieren. Schauen Sie sich den Code unten an.

Schreiben Sie eine HtmlPipe-Klasse

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

Pipe HtmlPipe in das erforderliche Modul einführen

@NgModule({
 declarations: [
 HtmlPipe
 ]
})

Fügen Sie den Pipe-Namen in innerHtml hinzu

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

Dadurch wird der CSS-Stil des Inhalts angezeigt.

Verwandte Empfehlungen;

Angular ruft die im Projekt definierte JSON-Datei ab

Was sind die integrierten Methoden von AngularJS

Einführung in die Formularvalidierungsfunktion mit AngularJS

Das obige ist der detaillierte Inhalt vonBeispielcode im CSS-Stil für die Anzeige von Inhalten in Angular4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!