Angular：根据 *ngIf 条件更改样式答案

【问题标题】：Angular: change style depending on *ngIf conditionAngular：根据 *ngIf 条件更改样式
【发布时间】：2022-02-04 14:10:54
【问题描述】：

我知道我可以这样做：

<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，其他角度工具，...）？

【问题讨论】：

标签： css angular sass angular-ng-if

【解决方案1】：

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

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

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

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

【讨论】：

是否可以在一个 [ngStyle] 中更改两个实例？
2 个实例是指为单个 div 添加 2 种不同的样式？

【解决方案2】：

最简单的方法：

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

stackblitz

【讨论】：

【解决方案3】：

太根据条件改变样式，你只需要使用这个：

[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";
   }
}

然后，根据条件管理样式的“更好”方法，使用类而不只是“样式”：

[ngClass]="expression"

例子：

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

.classACSS {
background-color: red;
}

.classBCSS {
background-color: blue;
}

我留给您HERE 文档，对所有这些进行更详细的解释。

【讨论】：

【解决方案4】：

&lt;div class="some-section" [style.backgroundColor]="age &lt; 18 ? 'red' : 'blue'"&gt;

【讨论】：

【解决方案5】：

这是一种方法，请查看stackblitz

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

【讨论】：

【解决方案6】：

<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>

【讨论】：