Изменить стиль псевдоэлементов в 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 css pseudo-element ng-style
person Murhaf Sousli    schedule 08.02.2016    source источник
comment
Обходной путь - stackoverflow.com/a/58485547/5043867   -  person Pardeep Jain    schedule 21.10.2019

Ответы (4)


arrow_upward
30
arrow_downward

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

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

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

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

person dfsq    schedule 08.02.2016
comment
Мне нужно динамически установить background-image для списка сообщений, так что это не сработает, вместо этого я установлю div.blurbackground и унаследую его в :before, спасибо за ответ. - person Murhaf Sousli; 09.02.2016
comment
Вы не можете установить стиль псевдоэлемента с помощью javascript. Таким образом, в этом случае вы можете использовать реальный элемент и вместо него установить фон. Просто притворись, что это псевдо. - person dfsq; 09.02.2016

arrow_upward
33
arrow_downward

Вы можете добиться того, что вам нужно, с помощью переменных 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 + ')')):

person sqwk    schedule 18.06.2016
comment
Я получаю источник изображения из ответа http, поэтому не могу установить фон из своей таблицы стилей. - person Murhaf Sousli; 19.06.2016
comment
[attr.style]="sanitizer.bypassSecurityTrustStyle('--custom:' + value)" помог мне - person slowkot; 31.07.2017
comment
есть хороший пакет под названием: github.com/lironbob/ngx-css-variables , что очень удобно при попытке выполнить этот трюк - person rivanov; 11.12.2018
comment
@sqwk, ты спасаешь жизни! это работает в браузере Chrome! Но это должно быть выполнено: /questions/49903552/ ‹br› в связи с вашим ответом. - person Artanis Zeratul; 28.05.2019

arrow_upward
4
arrow_downward

если вы хотите добавить другие свойства, я сделал это так:

<div class="progress" [style]= "'--porcentaje-width:' + widthh " ></div>

и CSS:

.progress::after {
  content: '';
  width: var(--porcentaje-width);
}

это сработало для меня :)

person Josué Aparicio    schedule 19.09.2020
comment
спасибо, мне тоже помогло - person sohaieb azaiez; 18.05.2021

arrow_upward
2
arrow_downward

В текущих версиях Angular 2+ вы можете использовать переменные CSS для достижения этой цели, а также для очистки ввода.

В вашей таблице стилей определите правило, используя переменные CSS. Резервный вариант также может быть определен, поскольку переменные CSS не поддерживаются IE. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

.featured-image:after { 
    content: '';
    // Fallback for IE
    background-image: url('fallback-img.png');
    background-image: var(--featured-image); 
}

Вместо того, чтобы обходить стиль доверия безопасности, вы также можете дезинфицировать ввод с помощью многоразового канала: https://angular.io/api/platform-browser/DomSanitizer#sanitize

import {Pipe, PipeTransform, SecurityContext} from '@angular/core';
import {DomSanitizer, SafeStyle} from '@angular/platform-browser';
@Pipe({
    name: 'safeStyle',
})
export class SafeStylePipe implements PipeTransform {
    constructor(protected sanitizer: DomSanitizer) {}
    transform(value: string): SafeStyle {
        if (!value) return '';

        return this.sanitizer.sanitize(SecurityContext.STYLE, value);
    }
}

В вашем шаблоне:

<div class="featured-image" [style.--featured-image]="featuredImage[i] | safeStyle"></div>
person RudyO    schedule 11.06.2020