web-dev-qa-db-fra.com

Changer le style des pseudo-éléments dans angular2

Est-il possible de changer le style des pseudo-éléments en utilisant [style] ou [ngStyle] en angulaire2?

afin d'obtenir un effet de flou sur un div agit comme une superposition, et je devrais configurer l'image d'arrière-plan sur le pseudo-élément.

J'ai essayé quelque chose comme

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

ça n'a pas marché. J'ai aussi essayé

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

Non ce n'est pas possible. Ce n'est en fait pas un Angular angulaire: les pseudo-éléments ne font pas partie de l'arborescence DOM, et à cause de cela, n'exposez aucune API DOM pouvant être utilisée pour interagir avec eux.

L'approche habituelle si vous voulez traiter des pseudo-éléments par programmation est indirecte: vous ajoutez/supprimez/modifiez la classe et en CSS, cette classe affecte le pseudo-élément correspondant. Donc, dans votre cas, vous pourriez avoir une classe de plus qui change le style nécessaire:

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

Il ne vous reste plus qu'à basculer .background classe sur l'élément lorsque vous avez besoin de before pseudo-élément pour obtenir un arrière-plan. Vous pouvez utiliser NgClass, par exemple.

22
dfsq

Vous pouvez obtenir ce dont vous avez besoin avec des variables CSS.

Dans votre feuille de style, vous pouvez définir l'image d'arrière-plan comme ceci:

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

Après cela, vous pouvez définir cette variable par programme sur le même élément ou plus haut dans l'arborescence DOM:

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

Plus d'informations sur les variables CSS ici: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables Notez que la prise en charge du navigateur n'est pas encore terminée.

Notez également que vous devrez nettoyer l'url/le style à l'aide de sanitizer.bypassSecurityTrustResourceUrl(path) ou sanitizer.bypassSecurityTrustStyle('--featured-image:url(' + path + ')')):

23
sqwk