Angular2'deki sözde öğelerin stilini değiştirme

Question

Köşeli elemanların stilini [style] veya [ngStyle] angular2 ile değiştirmek mümkün mü? Bir div üzerinde bir bulanıklık efekti elde etmek için, bir bindirme gibi bir eylem etkisi elde etmek için

ve sahte öğe üzerinde arkaplan resmi ayarlamalıyım.

Ben işe yaramadı

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

gibi bir şey denedik. Ayrıca bu

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

Answer 1

Hayır, bu mümkün değil. Aslında bir Açısal konu değildir: sözde öğeler DOM ağacının bir parçası değildir ve bu nedenle, bunlarla etkileşimde kullanılabilecek herhangi bir DOM API'sini göstermez.

Programsal olarak sözde öğelerle uğraşmak istiyorsanız olağan yaklaşım dolaylıdır: sınıf ekleme/çıkarma/değiştirme ve CSS'de bu sınıfı karşılık gelen sözde öğeyi etkilemeyi sağlarsınız. sizin durumunuzda gerekli tarzını değiştiren bir daha sınıf var olabilir Yani:

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

Şimdi tüm yapmanız gereken bir arka plan elde etmek before sözde eleman gerektiğinde elemana .background sınıfını geçiş etmektir. Örneğin, NgClass'u kullanabilirsiniz.

Answer 2

CSS değişkenleriyle ihtiyacınız olanı elde edebilirsiniz.

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

: yani programlama yoluyla aynı eleman ya da bir daha yukarı DOM ağacındaki bu değişkeni ayarlayabilirsiniz sonra

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

: stil sayfasında

böyle arka plan resmi ayarlayabilirsiniz

Burada CSS değişkenleri hakkında daha fazla bilgi için: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables Tarayıcı desteğinin henüz tamamlanmadığını unutmayın.

Ayrıca olacak sanitizer.bypassSecurityTrustResourceUrl(path) veya sanitizer.bypassSecurityTrustStyle('--featured-image:url(' + path + ')')) kullanan URL/stil sterilize gerektiğini not: