Ändern des Stils von Pseudoelementen in angular2

Question

Ist es möglich, den Stil von Pseudoelementen mit [style] oder [ngStyle] in angular2 zu ändern?

um einen Unschärfe-Effekt auf einem div zu erhalten wirkt wie ein Overlay, und ich sollte Hintergrundbild auf Pseudo-Element einrichten.

habe ich versucht, so etwas wie

<div class="blur" [style.before.backgroundImage]="'url('+ featuredImage[i] + ')'"> 

es hat nicht funktioniert. Ich habe auch versucht, diese

<div class="blur" [ngStyle]="'{:before{ background-image:url('+ featuredImage[i] + ')}}'"> 

Answer 1

Nein, es ist nicht möglich. Es ist eigentlich kein Angular-Problem: Pseudo-Elemente sind nicht Teil des DOM-Baums und stellen deshalb keine DOM-API zur Verfügung, die für die Interaktion mit ihnen verwendet werden kann.

Üblicherweise, wenn Sie mit Pseudo-Elementen programmatisch umgehen wollen, ist indirekt: Sie hinzufügen/entfernen/ändern Klasse und in CSS diese Klasse beeinflussen entsprechende Pseudo-Element. Also in Ihrem Fall, dass Sie eine weitere Klasse haben könnte, die notwendig Stil verändert:

.blur:before {/* some styles */} 
.blur.background:before {/* set background */} 

Alles was Sie jetzt tun müssen, ist .background Klasse auf dem Element zu wechseln, wenn Sie before Pseudo-Element benötigen einen Hintergrund zu erhalten. Sie können zum Beispiel NgClass verwenden.

Answer 2

Sie können erreichen, was Sie mit CSS-Variablen benötigen.

In Ihrem Stylesheet können Sie das Hintergrundbild wie folgt festgelegt:

.featured-image:after  { content: ''; 
          background-image: var(--featured-image); } 

Danach Sie programmatisch diese Variable auf demselben Element einstellen oder auf einem höheren DOM-Baum nach oben:

<div class="featured-image" [ngStyle]="{'--featured-image': featuredImage}"> 

Mehr über CSS-Variablen hier: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables Beachten Sie, dass die Browser-Unterstützung noch nicht abgeschlossen ist.

Beachten Sie auch, dass Sie die URL/Stil mit sanitizer.bypassSecurityTrustResourceUrl(path) oder sanitizer.bypassSecurityTrustStyle('--featured-image:url(' + path + ')')) sanieren muss: