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

Question

如何在 angular 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 输出中删除并触发此警告：

WARNING: sanitizing unsafe style value rotate(45deg) translateX(10px) (see http://g.co/ng/security#xss).

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

Complex and multiple transform styles in angular 2+

css-transforms

angular