如何在Angular的[ngStyle]中使用变量？

Question

我希望根据某些事件改变位置。 例如，在开始时，距离顶部的空间应为100像素，但在按钮点击后应为0像素。

<mat-list-item class="menu-item disabled " disableRipple (click)="toggleSubmenu($event)">
    <h3 matLine class="menu-item-text">Orchestration</h3>
  </mat-list-item>

我想编写一些类似的代码

<mat-list-item class="menu-item disabled " disableRipple (click)="toggleSubmenu($event)" [ngStyle]={top: myVarilable+'px'}>
    <h3 matLine class="menu-item-text">Orchestration</h3>
  </mat-list-item>

但是对我来说它不起作用。您有什么想法来解决它吗？

- user11768519

---

[ngStyle]="{'margin-top': myVarilable+'px'}" or [style.margin-top]="myVariable+'px+" - Eliseo

将样式添加到模板文件中后期修复和处理可能会非常令人困惑，@Smolarek。正确的方法是为您期望的每个行为创建两个类，并使用事件更改元素的类。 - Rafael

感谢您的帮助。我使用了[ngStyle]='myStyle'，并在.ts文件中创建了myStyle变量 :) - user11768519

@smolarekman，你可以更容易地完成这个任务。[style.top.px]="myVarilable" 请查看我发布的答案。 - polyglot

Answer 1

我不确定这是否是您正在寻找的，但您可以在ngStyle中传递一个对象，因此您可以使用返回动态生成的对象的函数。

像这样的东西。

HTML

<p [ngStyle]="setMyStyles()">
  You say tomato, I say tomato
</p>

组件

setMyStyles() {
  let styles = {
    'top': this.user.myVarilable + 'px',
  };
  return styles;
}

- Giorgos Papageorgiou

---

不建议在模板中直接使用函数，因为这会导致内存泄漏。请将值存储在变量中并用于绑定，或者使用纯管道。 - Houmam Hatahet

Answer 2

你可以非常简单地完成这个操作。

[ngStyle]="{'top.px': myVarilable}"

否则：

[style.top.px]="myVarilable"

- polyglot

---

第二个非常优雅且极其有用。 - AppDreamer

现在我很好奇，您如何使用第二个“否则”将多个变量分配给同一语句中的多个设置，例如背景颜色和颜色？ - AppDreamer

Answer 3

<div [ngStyle]="{'margin-top': !clicked ? '0px' : '100px'}"></div>

- papastepan

Answer 4

我通过在HTML和ts文件中添加以下代码来修复问题。

HTML：

<div [ngStyle]="getStyles()">

TS：

getStyles(): void {
    const myStyles = {
                'background': 'red,
            };
         return myStyles;
     }

希望这个能正常工作。

- Basavaraj SK

---

那是一种反模式。其他答案中提到了许多更好的替代方案，因此如果有人遇到这个问题，请不要使用这个解决方案。 - pascalpuetz

Answer 5

升级到Angular v9对我的项目来说不是一个选项。所以这个可以工作：

<div [style]="color">...</div>

color = this.sanitizer.bypassSecurityTrustStyle('--someKey: ' + someVariable);

示例2：

[style]="colorTest(progressPercentageValueoutOfTotal, progressColor)"

colorTest(progressPercentageValueoutOfTotal, progressColor) {
  return this.sanitizer.bypassSecurityTrustStyle('--percent: ' + progressPercentageValueoutOfTotal + '; stroke:' + progressColor);
}

我发现，如果通过[style.anyKey]或[ngStyle]设置了任何其他样式，则它将无法正常工作，因此我不得不创建一个仅包含变量的容器。

- Parth Developer