Cambia stile di pseudo elementi in angular2

Question

È possibile modificare lo stile degli pseudo elementi utilizzando [style] o [ngStyle] in angular2?

per ottenere un effetto di sfocatura su un div che si comporta come una sovrapposizione e dovrei impostare l'immagine di sfondo sullo pseudo elemento.

ho provato qualcosa di simile

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

non ha funzionato. Ho anche provato questo

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

Answer 1

No, non è possibile. In realtà non è un problema angolare: gli pseudo elementi non fanno parte dell'albero DOM e, a causa di ciò, non espongono alcuna API DOM che possa essere utilizzata per interagire con essi.

L'approccio abituale se si desidera gestire pseudo elementi a livello di codice è indiretto: si aggiunge/rimuovi/modifica classe e in CSS questa classe influenza lo pseudoelemento corrispondente. Quindi nel tuo caso si potrebbe avere una classe più che cambia stile necessaria:

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

Ora tutto quello che dovete fare è quello di attivare .background classe sull'elemento quando è necessario before pseudo-elemento per ottenere uno sfondo. È possibile utilizzare NgClass, ad esempio.

Answer 2

È possibile ottenere ciò che è necessario con le variabili CSS.

nel foglio di stile è possibile impostare l'immagine di sfondo come questo:

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

Dopo di che è possibile programatically impostare questa variabile sullo stesso elemento o su un più in alto l'albero del DOM:

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

Ulteriori informazioni sulle variabili CSS qui: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables Si noti che il supporto del browser non è ancora completo.

Si noti inoltre che si vuole bisogno di sanificare l'url/stile utilizzando sanitizer.bypassSecurityTrustResourceUrl(path) o sanitizer.bypassSecurityTrustStyle('--featured-image:url(' + path + ')')):