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

Question

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

我尝试过的方法：

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

并且

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

- ՕլՁՅԿ

Answer 1

这应该可以工作

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

编辑

看起来需要绕过XSS保护机制才能使其工作。

- QoP

---

已添加到答案中。 - QoP

我尝试使用bypassSecurityTrustStyle进行代码清洗，但它不起作用:/ - JesusMurF

不要禁用过滤。将样式声明放在 TypeScript 的 @Component 中并进行引用。 <div [@mystylename]> - RJFalconer

@RJFalconer，你能否详细解释一下或者给我提供该功能的参考资料？谢谢。 - Michele mpp Marostica

我知道这是可能的，因为我之前遇到过同样的问题。我会看看能否找出我当时做了什么。很抱歉成为了那个人。 - RJFalconer

Answer 2

接受的答案是有效的，但是通过使用方法作为样式属性的绑定，您可以使代码更加清晰。

<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.left}px` ;
}

getTopPx() {
    return `${this.top}px` ;
}

getZindex() {
    return `${this.z_index}` ;
}

getTransform() {
    return `translateX(${this.x}px)`;
}

- Mauricio Gracia Gutierrez

---

这个方案的性能是否与被接受的答案相同？ - ՕլՁՅԿ

你会在一分钟内调用它多少次？请随意比较并告诉我们。 - Mauricio Gracia Gutierrez

Answer 3

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

其中transX是一个组件变量。

- SoEzPz