更改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] + ' )}}'">

Answer 1

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

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

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

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

Answer 2

您可以使用 CSS 个变量实现您所需要的。

根据您的风格sheet，您可以这样设置背景图片：

.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

Answer 3

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

按照您的风格 sheet 使用 CSS 变量定义规则。回退也可以定义为 CSS IE 不支持变量。 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中伪元素的样式

Change style of pseudo elements in angular2

css

pseudo-element

ng-style

angular