首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >角2+中的绑定2+变换

角2+中的绑定2+变换
EN

Stack Overflow用户
提问于 2017-04-07 11:05:12
回答 3查看 9.2K关注 0票数 5

如何用角度绑定transform: translateX()样式?

我试过的是:

代码语言:javascript
运行
复制
<div [style.transform]="translateX({{x}})">

代码语言:javascript
运行
复制
<div [style.transform.translateX.px]="x">
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-04-07 11:35:51

这应该能行

代码语言:javascript
运行
复制
<div [style.transform]="'translateX(' + x + 'px)'">

编辑

似乎有必要绕过XSS保护才能工作。

票数 9
EN

Stack Overflow用户

发布于 2020-05-04 21:14:32

代码语言:javascript
运行
复制
[ngStyle]="{'transform': 'translateX(' + transX + 'px)'}"

其中transX是一个组件变量。

票数 0
EN

Stack Overflow用户

发布于 2021-06-14 16:56:18

接受的答案有效,但是您可以使用方法作为样式属性的绑定,从而使代码更加简洁。

代码语言:javascript
运行
复制
<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>

在包含需要绑定到的值的类中:

代码语言:javascript
运行
复制
getLeftPx() {
    return `${this.left}px` ;
}

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

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

getTransform() {
    return `translateX(${this.x}px)`;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/43276586

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档