如何在Angular 2中使用ngStyle将transform translate属性应用于元素

Posted 2023-03-06

【中文标题】如何在Angular 2中使用ngStyle将transform translate属性应用于元素

【英文标题】：How to apply transform translate property to element using ngStyle in Angular2+

【发布时间】：2017-11-05 23:16:06

【问题描述】：

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

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

提前感谢大家！

【问题讨论】：

***.com/questions/22091733/…

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

@Arg0n 谢谢！如果您想创建答案，我会将其标记为已解决:)

【参考方案1】：

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

$value 给了我一个错误。

【参考方案2】：

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

【讨论】：

嗨，乔恩，我很困惑变量前后的 +（加号）符号有什么用

嗨，这是因为该值是一个字符串，即"string here " + myVariable + " joining another string"

【参考方案3】：

假设您的控制器中有$value 变量，您可以按如下方式使用$value：

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

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

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