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

【问题标题】：Bind translateX() transform in Angular 2+在 Angular 2+ 中绑定 translateX() 变换
【发布时间】：2017-09-02 17:56:36
【问题描述】：

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

我尝试过的：

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

和

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

【问题讨论】：

标签： angular binding

【解决方案1】：

这应该可以工作

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

编辑

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

【讨论】：

添加到答案中
我尝试使用 bypassSecurityTrustStyle 进行消毒，但它不起作用：/
看看https://stackoverflow.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.left}px` ;
}

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

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

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

【讨论】：

这与接受的答案是否具有相同的性能？
你要在 1 分钟内调用多少次？随意比较，让我们知道。