css - Angular 'filter' 样式绑定(bind)不起作用

Question

有一个例子

@Component({
    selector: 'my-app',
    template: `
    <div>
    <h2 style="background-color:green">
        No Filter
    </h2>
    </div>
    <div style="filter:brightness(0.5)">
    <h2 style="background-color:green">
        Filter with style.
    </h2>
    </div>
    <div [style.filter]="'brightness(' + val + ')'">
    <h2 style="background-color:green">
        Filter with style binding.
    </h2>
    </div>
    <p>filter binding express value: {{'brightness(' + val + ')'}}</p>
    `,
})
export class App {
    val = 0.5;
}

https://plnkr.co/edit/gD9xkX5aWrdNDyD6fnIh?p=preview

得到渲染结果:



似乎样式绑定(bind) [style.filter] 不起作用。任何人都知道原因或提供另一种通过组件成员值控制过滤器亮度样式的方法？

感谢您的任何回答!

Answer 1

当我们像这样应用过滤器样式时:

<div [style.filter]="'brightness(' + val + ')'">

控制台中出现以下消息:

WARNING: sanitizing unsafe style value brightness(0.5)

风格表达 brightness(0.5)被 Angular 认为是不安全的。我们可以通过调用 DomSanitizer.bypassSecurityTrustStyle 将其标记为安全。在组件类的方法中或在定义为的自定义管道的帮助下:

import { Pipe } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";

@Pipe({name: 'safe'})
export class SafePipe {

    constructor(private sanitizer: DomSanitizer){
    }

    transform(style) {
        return this.sanitizer.bypassSecurityTrustStyle(style);
    }
}

可以在模板中这样应用:

<div [style.filter]="'brightness(' + val + ')' | safe">

另一种不涉及 sanitizer 问题的方法是使用 ngStyle指示:

<div [ngStyle]="{'filter': 'brightness(' + val + ')'}">

this stackblitz 中显示了这两种技术.

不安全样式表达式的问题已经在其他帖子中讨论过:

https://stackoverflow.com/a/38663363/1009922

https://stackoverflow.com/a/37267875/1009922