无法绑定到 angular 中的 style.clip-path 4

Question

我在 Angular 4 中有一个简单的组件，如下所示：

HTML

<div [style.clip-path]="shape" [style.background-color]="color"</div>

我唯一添加到 .ts 文件的是：

 color = 'green';
 shape = 'polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)';

有一些样式使 div 400px x 400px。当我提供此代码时，我看到一个绿色框，这意味着样式绑定至少在 background-color 内有效。然而，盒子仍然是正方形，而不是我定义的五边形。 clip-path 好像没有设置好。

更奇怪的是，我用 Angular 2 测试了它，它按预期运行。

从 Angular 2 -> Angular 4 开始拒绝绑定到特定样式属性的内容是否发生了变化？

Answer 1

它不起作用，因为它正在被清理。

您需要使用 DomSanitizer。来自文档：

Calling any of the bypassSecurityTrust... APIs disables Angular's built-in sanitization for the value passed in. Carefully check and audit all values and code paths going into this call. Make sure any user data is appropriately escaped for this security context. For more detail, see the Security Guide.

因此，注入 DomSanitizer 并使用 bypassSecurityTrustStyle。

private _polygon = 'polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)';

public get polygon() {
   return this.sanitizer.bypassSecurityTrustStyle(this._polygon);
}

constructor(private sanitizer: DomSanitizer) { }

无法绑定到 angular 中的 style.clip-path 4

Can't bind to style.clip-path in angular 4

html

css

angular

clip-path