Question

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

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

我试过像

这样的东西

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

它不起作用。我也试过这个

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

Answer 1

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

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

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

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

Answer 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请注意，浏览器支持尚未完成。

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

Answer 3

在Angular 2+的当前版本中，您可以使用CSS变量来实现此目的以及清理输入。

在样式表中，使用CSS变量定义规则。还可以定义一个后备版本，因为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>

Answer 4

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

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

和CSS：

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

这对我有用：）

在angular2中更改伪元素的样式

4 个答案: