如何在 Angular2+ 中使用 ngStyle 将变换翻译属性应用于元素

Question

我正在尝试使用[ngStyle]有条件地将transform: translateX($value)直接应用于模板元素，但我找不到任何人在谈论这个。 主要是因为我不知道要搜索什么：D。

我已经看到一些方法使用[style.color]或更高级的[attr.style]="{'transform': 'translateX(4rem)'}"做基本样式，但最后一个在渲染中返回HTML 这个： style="unsafe" 。 我已经看到您可以使用Sanitizer来消毒或绕过您的样式/脚本等……但此时它开始“闻起来”，就像您不应该做的事情一样？ 我正在寻找一种干净的方法来实现这一目标。 但我不知道在哪里看。

在此先感谢大家！

Answer 1

或者你可以使用[style.transform]="'translateX('+$value+')'"它本质上是一样的，但我更喜欢这种语法。

Answer 2

您可以使用[ngStyle]如下，假设您的控制器中有一个$value变量：

[ngStyle]="{'transform': 'translateX(' + $value + 'px)'}"

并假设您想更改具有控制器变量 $x 和 $y 的轴

[ngStyle]="{'transform': 'translate(' + $x + 'px, ' + $y + 'px)'}"

Answer 3

[style.transform]="'translateX('+value+'px)'"在 Angular 中为我工作。

$value给了我一个错误。