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

liwlm1x9  于 2023-02-01  发布在  Angular
关注(0)|答案(3)|浏览(126)

我尝试使用[ngStyle]有条件地将transform: translateX($value)直接应用于模板元素,但是我找不到任何人在谈论这个,主要是因为我不知道该搜索什么:D。
我见过一些使用[style.color]进行基本样式化的方法,或者使用[attr.style]="{'transform': 'translateX(4rem)'}"进行更高级的样式化,但最后一种方法在呈现的HTML中返回以下内容:我发现你可以使用Sanitizer来清理或者绕过你的风格/脚本等等...但是在这一点上它开始“闻起来”像是你不应该做的事情?我正在寻找一个干净的方法来实现这一点。但是我不知道该去哪里找。
提前感谢大家!

42fyovps

42fyovps1#

或者,您可以使用

[style.transform]="'translateX('+ $value + 'px)'"

本质上是一样的,但我更喜欢这种语法。

vjhs03f7

vjhs03f72#

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

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

假设您想更改具有控制器变量$x、$y的两个轴

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

zsohkypk3#

**[style.transform]=“'translateX('+ value +'px。'”**适用于Angular 。
$value给了我一个错误。

相关问题