在angular2中更改伪元素的样式

Question

是否可以使用[style]或[ngStyle]在angular2中更改伪元素的样式？

为了获得div上的模糊效果,就像叠加一样,我应该在伪元素上设置背景图像.

我试过类似的东西

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

它不起作用.我也尝试过这个

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

Answer 1

您可以使用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请注意,浏览器支持尚未完成.

另请注意,您需要使用sanitizer.bypassSecurityTrustResourceUrl(path)或清理网址/样式sanitizer.bypassSecurityTrustStyle('--featured-image:url(' + path + ')')):

Answer 2

不,这是不可能的.它实际上不是Angular问题:伪元素不是DOM树的一部分,因此不暴露任何可用于与它们交互的DOM API.

通常的方法,如果你想以编程方式处理伪元素是间接的:你添加/删除/更改类,并在CSS中使这个类影响相应的伪元素.因此,在您的情况下,您可以再创建一个更改必要样式的类:

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

现在,您需要做的是.background在需要before伪元素来获取背景时切换元素上的类.NgClass例如,您可以使用.

Answer 3

如果你想添加其他属性，我是这样做的：

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

和CSS：

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

这对我有用:)