Изменить стиль псевдо элементов в angular2
Можно ли изменить стиль псевдоэлементов с помощью [style] или [ngStyle] в angular2?
чтобы получить эффект размытия на div, действует как наложение, и я должен установить фоновое изображение на псевдоэлемент.
Я пробовал что-то вроде
<div class="blur" [style.before.backgroundImage]="'url('+ featuredImage[i] + ' )'">
это не сработало. Я также пробовал это
<div class="blur" [ngStyle]="'{:before{ background-image:url('+ featuredImage[i] + ' )}}'">
Ответы
Ответ 1
Нет, это невозможно. На самом деле это не проблема Angular: псевдоэлементы не являются частью дерева DOM, и из-за этого не выставляются какие-либо DOM API, которые могут использоваться для взаимодействия с ними.
Обычный подход, если вы хотите использовать псевдоэлементы программно, косвенен: вы добавляете/удаляете/меняете класс, а в CSS этот класс влияет на соответствующий псевдоэлемент. Поэтому в вашем случае у вас может быть еще один класс, который изменяет необходимый стиль:
.blur:before {/* some styles */}
.blur.background:before {/* set background */}
Теперь вам нужно всего лишь переключить класс .background на элемент, если вам нужен before псевдоэлемент, чтобы получить фон. Например, вы можете использовать NgClass.
Ответ 2
Вы можете добиться того, что вам нужно с переменными 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/стиль с помощью sanitizer.bypassSecurityTrustResourceUrl(path) или sanitizer.bypassSecurityTrustStyle('--featured-image:url(' + path + ')')):
