Angular: 根据 *ngIf 条件更改样式

Question

我知道我可以做这样的事情：

<ng-container *ngIf="user.age<18;else over">
  <div class="some-section" style="background-color: red;">
    [...]
  </div>
</ng-container>
<ng-template #over>
  <div class="some-section" style="background-color: blue;">
    [...]
  </div>
</ng-template>

虽然这有效，但它是重复代码。有没有办法只改变样式，这样就没有重复（scss，其他 angular 工具，...）？

Answer 1

太看情况换个样式，你只要用这个：

[style.xxx]="expression"

示例：

<div class="some-section" [style.backgroundColor]="age < 18 ? 'red' : 'blue'">

或通过函数，进行更“复杂”的计算而不会搞砸HTML

<div class="some-section" [ngStyle]="calculateStyles()">

calculateStyles() {
   if (user.age<18) { 
      return "background-color: red";
   } else {
      return "background-color: blue";
   }
}

然后，根据条件管理样式的“更好”方法，使用 class 而不仅仅是“样式”:

[ngClass]="expression"

示例：

<div class="some-section" [ngClass]="{'classACSS': user.age<18, 'classBCSS': user.age>=18}"

.classACSS {
background-color: red;
}

.classBCSS {
background-color: blue;
}

我将 HERE 文档留给您，其中包含对所有这些内容的更详细解释。

Answer 2

最简单的方法：

  <div class="some-section"
       [style.backgroundColor]="age > 18 ? 'red' : 'blue'">
    [...]
  </div>

stackblitz

Answer 3

这是一种方法，请查看此 stackblitz

<div class="some-section" style="background-color: {{age < 18 ? 'red' : 'blue'}}">
  Test
</div>

Answer 4

由于问题标题提到样式，我们将仅使用 [ngStyle]

应用样式

要仅更改样式，您可以使用 [ngStyle] 而不是 [ngClass]，这会添加 class 而不是样式。以您的代码为例，它应该如下所示：

<div class="some-section" [ngStyle]="{'background-color': (user.age < 18) ? 'red' : ((user.age >= 18) ? 'blue' : null) }">
  [...]
</div>

还使用 [ngStyle] 和 [ngClass] 添加样式和 classes 将帮助您绑定 classes 的字符串、字符串数组或 object。对于更复杂的场景。

Answer 5

<div class="some-section" *ngIf="user.age<18" style="background-color:red;">
  [...]
</div>
<div class="some-section" *ngIf="user.age>18" style="backdrop-color:blue">
  [...]
</div>

Answer 6

<div class="some-section" [style.backgroundColor]="age < 18 ? 'red' : 'blue'">

Angular: 根据 *ngIf 条件更改样式

Angular: change style depending on *ngIf condition

css

sass

angular-ng-if

angular