web-dev-qa-db-ja.com

angular2の擬似要素のスタイルを変更します

Angle2で[style]または[ngStyle]を使用して擬似要素のスタイルを変更することは可能ですか？

divでぼかし効果を得るためにオーバーレイのように動作し、擬似要素にbackground-imageを設定する必要があります。

私は次のようなものを試しました

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

うまくいきませんでした。私もこれを試しました

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

いいえ、不可能です。実際にはAngularの問題ではありません：疑似要素はDOMツリーの一部ではありません。そのため、それらと対話するために使用できるDOM APIを公開しません。

プログラムで擬似要素を処理する場合の通常のアプローチは間接的です。クラスを追加/削除/変更し、CSSでこのクラスを対応する擬似要素に影響させます。そのため、必要なスタイルを変更するもう1つのクラスを作成できます。

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

ここで必要なのは、背景を取得するためにbefore擬似要素が必要な場合に、要素の.backgroundクラスを切り替えることだけです。たとえば、NgClassを使用できます。

22
dfsq

CSS変数で必要なものを実現できます。

スタイルシートでは、次のように背景画像を設定できます。

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

その後、DOMツリーの同じ要素以上にプログラムでこの変数を設定できます。

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

CSS変数の詳細はこちら： https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables ブラウザーのサポートに注意してくださいまだ完全ではありません。

また、sanitizer.bypassSecurityTrustResourceUrl(path)またはsanitizer.bypassSecurityTrustStyle('--featured-image:url(' + path + ')'))を使用してURL /スタイルをサニタイズする必要があることに注意してください。

23
sqwk