angular2の[style]または[ngStyle]を使用して擬似要素のスタイルを変更できますか？angular2の擬似要素のスタイルを変更
divのぼかし効果を得るためには、オーバーレイのように動作し、擬似要素に背景画像を設定する必要があります。
私はそれが動作しませんでした
<div class="blur" [style.before.backgroundImage]="'url('+ featuredImage[i] + ')'">
のようなものを試してみました。私もこれを試しました
<div class="blur" [ngStyle]="'{:before{ background-image:url('+ featuredImage[i] + ')}}'">
いいえ、それはできません。実際にはAngularの問題ではありません。擬似要素はDOMツリーの一部ではなく、そのために相互作用するために使用できるDOM APIは公開されていません。
擬似要素をプログラムで処理したい場合は、間接的なアプローチです：クラスを追加/削除/変更し、CSSでこのクラスを対応する擬似要素に影響させます。あなたのケースで必要なスタイルを変更する1以上のクラスを持つことができますので：
.blur:before {/* some styles */}
.blur.background:before {/* set background */}
before擬似要素を必要なとき要素に
.backgroundクラスを切り替えることです。たとえば、
NgClassを使用できます。
CSS変数で必要なものを達成できます。あなたはこのような背景の画像を設定することができ、あなたのスタイルシートに
：その後
.featured-image:after { content: '';
background-image: var(--featured-image); }
あなたがプログラム的に同じ要素またはDOMツリーの1つ上の上位に、この変数を設定することができます。
<div class="featured-image" [ngStyle]="{'--featured-image': featuredImage}">
CSS変数の詳細：https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variablesブラウザのサポートはまだ完了していません。
httpレスポンスから画像ソースを取得しましたので、スタイルシートからバックグラウンドを設定できません。 –
'[attr.style] =" sanitizer.bypassSecurityTrustStyle（ ' - custom：' + value） "'助けてください – slowkot
私はそれがこのように動作しませんので、ポストのリストについては、動的に '背景image'を設定する必要があり、：
はまた、あなたが
sanitizer.bypassSecurityTrustResourceUrl(path)やsanitizer.bypassSecurityTrustStyle('--featured-image:url(' + path + ')'))を使用してURL /スタイルをサニタイズする必要があることに注意します代わりに 'div.blur'backgroundを設定し、それを'：before'に継承します。答えをありがとう。 –javascriptで擬似要素のスタイルを設定することはできません。だから、この場合、実際の要素を使って、その代わりに背景を設定することができます。ちょうどそれが疑似であるふりをする。 – dfsq