更改angular2中伪元素的样式

Question

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

为了在 div 上获得模糊效果，就像覆盖一样，我应该在伪元素上设置背景图像。

我尝试了类似的东西

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

它没有用。我也试过这个

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

原文由 Murhaf Sousli 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

原文由 dfsq 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

和CSS：

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

这对我有用:)

原文由 Josué Aparicio 发布，翻译遵循 CC BY-SA 4.0 许可协议