Question

如何在角度2 +中添加多个内联变换样式？

这有效：

[style.transform]="'rotate(45deg)'"

但是当我添加超过1种样式时，它不起作用：

[style.transform]="'rotate(45deg) translateX(10px)'"

在哪里可以找到支持的style.*指令的参考？这样的事情可能吗？

[style.transform.translateX.px] = "10"
[style.transform.rotate.deg] = "45"

Answer 1

以下两种方法有效：

方法1 - 使用ngStyle ：

[ngStyle]="{'transform': 'rotate(45deg) translateX(10px)'}"

方法2 - 清理传递给[style.transform]的值：

[style.transform]="myTransform"

import { DomSanitizer, SafeStyle } from '@angular/platform-browser';

get myTransform(): SafeStyle {
  return this._sanitizer.bypassSecurityTrustStyle("rotate(45deg) translateX(10px)");
}

请参阅this stackblitz。

如问题中所述，以下语法不起作用（请参阅this demo）：

[style.transform]="'rotate(45deg) translateX(10px)'"

从HTML输出中删除style属性并触发此警告：

警告：清理不安全的样式值rotate（45deg）translateX（10px）（见http://g.co/ng/security#xss）。

角度2+中的复杂和多种变换样式

1 个答案: