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

【问题标题】：Angular 'filter' style binding not work角度“过滤器”样式绑定不起作用
【发布时间】：2018-06-09 00:56:04
【问题描述】：

有一个例子

@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] 不起作用。有人知道原因或提供另一种方法来通过组件成员值控制过滤器亮度样式吗？

感谢您的任何回答！

【问题讨论】：

[style.box-shadow] 也不起作用。 Angular 样式绑定是否只支持有限的 CSS 类型？我在 Angular 官网或谷歌上找不到相关文档。

标签： css angular

【解决方案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 + ')'}">

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

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

【讨论】：

我为[style.filter]的问题添加了解释和解决方案。