Изменение стиля псевдоэлементов в angular2

можно ли изменить стиль псевдо-элементов с помощью [style] или [ngStyle] в angular2?

чтобы получить эффект размытия на div действует как наложение, и я должен настроить фоновое изображение на псевдо-элементе.

я попробовал что-то вроде 

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

это не сработало. Я также пробовал это

<div class="blur" [ngStyle]="'{:before{ background-image:url('+ featuredImage[i] + ' )}}'">
15
angular css ng-style pseudo-element

2 ответов

нет, это невозможно. На самом деле это не угловая проблема: псевдо-элементы не являются частью дерева DOM и из-за этого не предоставляют API DOM, который можно использовать для взаимодействия с ними.

обычный подход, если вы хотите иметь дело с псевдоэлементами программно, является косвенным: вы добавляете/удаляете / изменяете класс и в CSS заставляете этот класс влиять на соответствующий псевдоэлемент. Поэтому в вашем случае у вас может быть еще один класс, который необходимо изменить стиль:

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

теперь все, что вам нужно сделать, это тумблер .background класс на элементе, когда вам нужно before псевдо-элемент для получения фона. Вы можете использовать NgClass, например.

14

вы можете достичь того, что вам нужно с переменными 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 обратите внимание, что поддержка браузера еще не завершена.

Также обратите внимание, что вам нужно будет санировать url / style с помощью sanitizer.bypassSecurityTrustResourceUrl(path) или sanitizer.bypassSecurityTrustStyle('--featured-image:url(' + path + ')')):

10