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

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）

Angular认为样式表达式brightness(0.5)不安全。我们可以通过在组件类的方法中调用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 + ')'}">

这两种技术都显示在this stackblitz。

中

其他帖子中讨论了不安全样式表达式的问题：

1. https://stackoverflow.com/a/38663363/1009922
2. https://stackoverflow.com/a/37267875/1009922