在 Angular 2+ 中绑定 translateX() 变换

Posted 2023-02-23

【中文标题】在 Angular 2+ 中绑定 translateX() 变换

【英文标题】：Bind translateX() transform in Angular 2+

【发布时间】：2017-09-02 17:56:36

【问题描述】：

如何在 Angular 中绑定transform: translateX() 样式？

我尝试过的：

<div [style.transform]="translateX(x)">

和

<div [style.transform.translateX.px]="x">

【参考方案1】：

这应该可以工作

<div [style.transform]="'translateX(' + x + 'px)'">

编辑

似乎有必要绕过XSS protection才能使其工作。

【讨论】：

添加到答案中

我尝试使用 bypassSecurityTrustStyle 进行消毒，但它不起作用：/

看看https://***.com/questions/39524536/angular-2-disable-sanitize

不要禁用消毒。将样式声明放在打字稿@Component 上并引用它。 <div [@mystylename]>

我知道这是可能的，因为我之前遇到过同样的问题。我会看看我是否可以挖掘出我所做的事情。对不起That Guy

【参考方案2】：

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

其中transX 是一个组件变量。

【参考方案3】：

接受的答案有效，但您可以通过使用方法作为样式属性的绑定来使您的代码更简洁

<div *ngFor="let il of imageLayers">
    <img class="divFloatLayer" 
        [src]="il.img_src" 
        [style.left]="il.getLeftPx()"
        [style.top]="il.getTopPx()"
        [style.z-index]="il.getZindex()"
        [style.transform]="il.getTransform()"
    />
</div>

在包含您需要绑定的值的类中：

getLeftPx() 
    return `$this.leftpx` ;


getTopPx() 
    return `$this.toppx` ;


getZindex() 
    return `$this.z_index` ;


getTransform() 
    return `translateX($this.xpx)`;

【讨论】：

这与接受的答案是否具有相同的性能？

你要在 1 分钟内调用多少次？随意比较，让我们知道。