如何使用 ngStyle 动态应用样式？

Question

如何根据布尔值切换左 px 值和右值？

我想根据条件切换[ngStyle]="{ 'left.px': offSetX } 和[ngStyle]="{ 'right.px': offSetX }

    import { Component, Input } from "@angular/core";

@Component({
  selector: "hello",
  template: `
    <div class="myDiv" [ngStyle]="{ 'left.px': offSetX }"></div>

    <button (click)="applyRightStyle()">Apply Right Style</button>
  `,
  styles: [
    `
      .myDiv {
        border: 1px solid black;
        height: 200px;
        width: 200px;
        position: absolute;
        top: 100px;
        margin-left: 50px;
      }
    `
  ]
})
export class HelloComponent {
  @Input() name: string;

  offSetX = 100;
  applyRightBoolean = false;

  applyRightStyle() {}
}

Stackblitz Demo

编辑：如果我应用右侧，我想替换样式，如删除左侧，应用左侧时删除右侧，因为left: 0px, right: 10px 不等于right: 10px。

解决方法：正确重置left或right的方法是使用initial而不是0px

Answer 1

我认为我们必须同时管理这两种风格。它也适用于ngStyle，但我喜欢[style.xxx] 语法：

@Component({
  selector: "hello",
  template: `
    <div class="myDiv" [style.left.px]="offSetLeft" [style.right.px]="offSetRight"></div>

    <button (click)="applyRightStyle()">Apply Right Style</button>
    <button (click)="applyLeftStyle()">Apply Left Style</button>

  `
})
export class HelloComponent {
  @Input() name: string;

  offSetLeft = 100;
  offSetRight = 0;
  applyRightBoolean = false;

  applyRightStyle() {
    this.offSetLeft = 0;
    this.offSetRight = 50;
  }

  applyLeftStyle() {
    this.offSetLeft = 100;
    this.offSetRight = 0;
  }
}

分叉你的stackblitz。

Answer 2

为什么不同时保留它们并根据条件重置？

Stackblitz

import { Component, Input } from "@angular/core";

@Component({
  selector: "hello",
  template: `
    <div class="myDiv" [ngStyle]="{ 'left.px': !applyRightBoolean ? offSetX : 0, 'right.px': applyRightBoolean ? offSetX : 0 }"></div>

    <button (click)="applyRightStyle()">Apply Right Style</button>
  `,
  styles: [
    `
      .myDiv {
        border: 1px solid black;
        height: 200px;
        width: 200px;
        position: absolute;
        top: 100px;
        margin-left: 50px;
      }
    `
  ]
})
export class HelloComponent {
  @Input() name: string;

  offSetX = 100;
  applyRightBoolean = false;

  applyRightStyle() {
    this.applyRightBoolean = true;
  }
}

Answer 3

public bgcolor = "red";

 [style.backgroundColor]="bgcolor"
second way used like that for multiple

public bgcolor = {
    backgroundColor:"orange"
};

[ngStyle]="bgcolor"

适合你的风格

[ngStyle]="{ backgroundColor:'#' + element.color }"

<ng-container matColumnDef="color">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> color </th>
  <td mat-cell *matCellDef="let element" [ngStyle]="{ backgroundColor:'#' + element.color }" > #{{element.color}} </td>
</ng-container>

Answer 4

更新：

[ngStyle]="{ condition ? '\'left.px\': offSetX' : '\'right.px\': offSetX'}