Zeigen Sie CSS-Stile in Angular 4 an

Dieses Mal erkläre ich Ihnen, wie Sie CSS-Stile in Angular 4 anzeigen. Was sind die Vorsichtsmaßnahmen für die Anzeige von CSS-Stilen in Angular 4? Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

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 alle Werte als nicht vertrauenswürdig standardmäßig. Wenn der Wert aus der Vorlage über Attribute (Property), DOM-Elementattribute (Attribute), CSS-Klasse-Bindung oder Interpolation Ausdruck usw. in das DOM eingefügt wird, Angular bereinigt diese Werte und kodiert 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 das HTML-Tag erkennen, aber nicht den Attributwert im Tag

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.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonZeigen Sie CSS-Stile in Angular 4 an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!