Angular2如何更改伪元素的样式

Question

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

为了在一个充当覆盖层的div上获得模糊效果，我应该在伪元素上设置background-image。

我尝试了类似以下的内容：

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

它没起作用。我也尝试过这个

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

- Murhaf Sousli

---

解决方法 - https://stackoverflow.com/a/58485547/5043867 - Pardeep Jain

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 +')）'）对url / style进行清理：

- sqwk

---

我从HTTP响应中获取图像源，因此无法从我的样式表中设置背景。 - Murhaf Sousli

[attr.style]="sanitizer.bypassSecurityTrustStyle('--custom:' + value)" 帮助了我。 - slowkot

有一个很好的包叫做：https://github.com/lironbob/ngx-css-variables，当尝试这个技巧时非常方便。 - rivanov

@sqwk，你真是救星！它在Chrome浏览器上运行得很好！但是必须遵循这个：https://dev59.com/x1UL5IYBdhLWcg3wt6AK <br>与您的答案相结合。 - Artanis Zeratul

对于多个变量 [style.--myFirstVar]="'25%'" [style.--mySecondVar]="'35px'" - WantToDo

Answer 2

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

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

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

现在你需要做的就是在需要给伪元素before添加背景时，在元素上切换.background类。你可以使用NgClass，例如。

- dfsq

---

我需要动态设置一系列文章的background-image，所以这种方式行不通，相反我将设置div.blur背景并在:before中继承它，感谢您的答案。 - Murhaf Sousli

你不能使用JavaScript设置伪元素的样式。因此，在这种情况下，您可以使用真实元素并设置其背景，而不是伪元素。只需假装它是伪元素即可。 - dfsq

Answer 3

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

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

和 CSS：

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

这对我起作用了 :)

- Josué Aparicio

Answer 4

在当前版本的Angular 2+中，您可以使用CSS Variables来实现此目的，并对输入进行清理。

在样式表中定义规则时使用CSS Variables。由于IE不支持CSS变量，因此还可以定义回退。

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>

- RudyO