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

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 400 像素 x 400 像素。 当我提供此代码时，我看到一个绿色框，这意味着样式绑定至少对background-color 有效。然而，盒子仍然是一个正方形，而不是我定义的五边形。 clip-path 似乎设置不正确。

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

是否从 Angular 2 -> Angular 4 发生了一些变化，拒绝绑定到特定的样式属性？

Answer 1

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

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

调用任何bypassSecurityTrust... API 都会禁用 Angular 对传入值的内置清理。仔细检查和审核进入此调用的所有值和代码路径。确保针对此安全上下文适当地转义了任何用户数据。更多详情，请参阅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) { }