25

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

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

我尝试了类似的东西

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

它没有用。我也试过这个

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

4 回答 4

37

您可以使用 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)or清理 url/样式sanitizer.bypassSecurityTrustStyle('--featured-image:url(' + path + ')'))：

于 2016-06-18T22:20:08.327 回答
29

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

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

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

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

于 2016-02-08T22:38:04.113 回答
6

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

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

和CSS：

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

这对我有用:)

于 2020-09-19T00:23:07.947 回答
2

在当前版本的 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-b​​rowser/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>
于 2020-06-11T07:45:43.970 回答