角的“过滤器”样式绑定不起作用

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

得到了渲染结果：

似乎样式绑定[style.filter]不起作用。有谁知道原因或通过组件成员值提供其他方法来控制滤镜亮度样式？

感谢您的回答！

Answer 1

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

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

控制台中将显示以下消息：

警告：清除不安全的样式值亮度（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">

不涉及卫生问题的替代方法是使用ngStyle指令：

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

两种技术都在此堆叠闪电中显示。

其他文章中还讨论了不安全的样式表达问题：

1. /sf/answers/2706435441/
2. /sf/answers/26071/​​67875/1009922