更改angular2中伪元素的样式答案

【问题标题】：Change style of pseudo elements in angular2更改angular2中伪元素的样式
【发布时间】：2016-05-18 17:36:50
【问题描述】：

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

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

我尝试了类似的东西

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

它没有工作。我也试过这个

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

【问题讨论】：

解决方法 - stackoverflow.com/a/58485547/5043867

标签： css angular pseudo-element ng-style

【解决方案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 + ')')) 清理网址/样式：

【讨论】：

我从 http 响应中获取图像源，所以我无法从我的样式表中设置背景
[attr.style]="sanitizer.bypassSecurityTrustStyle('--custom:' + value)" 帮了我
有一个不错的包叫：github.com/lironbob/ngx-css-variables，在尝试这个技巧时非常方便
@sqwk，你是救生员！它适用于 Chrome 浏览器！但这必须遵循：stackoverflow.com/questions/49903552/…
结合您的回答。

【解决方案2】：

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

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

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

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

【讨论】：

我需要为帖子列表动态设置background-image，所以它不会这样工作，而是我将设置div.blurbackground并在:before中继承它，谢谢寻找答案。
你不能用javascript设置伪元素的样式。因此，在这种情况下，您可以使用真实元素并设置它的背景。假装它是伪的。

【解决方案3】：

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

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

和css：

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

这对我有用:)

【讨论】：

【解决方案4】：

在当前版本的 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>

【讨论】：