在Angular 2+中绑定translateX（）变换

Question

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

我尝试了什么：

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

和

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

Answer 1

这应该有效

NSView

修改

似乎有必要绕过XSS protection才能发挥作用。

Answer 2

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

其中transX是组件变量。

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

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

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

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