ngClass 多个条件 - CSS

在 Angular 中，ngClass 是一个很有用的指令，它可以动态地添加或移除一个或多个 CSS 类。在某些情况下，我们需要根据多个条件来动态地添加或移除 CSS 类，下面我们就来介绍一下如何实现这个需求。

基本用法

首先我们来看一下 ngClass 的基本用法。我们可以将一个字符串、对象或数组传递给 ngClass 指令的值，这个值表示要添加的 CSS 类。如果传递的是一个对象，对象的键表示 CSS 类名，值表示要不要添加这个类名。如果值为 true，就会添加这个类名；如果值为 false，就会移除这个类名。例如：

<div [ngClass]="{ 'class1': true, 'class2': false }"></div>

上面的代码会给 div 元素添加 class1 这个 CSS 类，而移除 class2 这个 CSS 类。

多个条件

接下来我们来看一下如何在 ngClass 中使用多个条件。假设我们有三个要添加的 CSS 类名，分别是 class1、class2 和 class3。我们希望当条件 A 满足时添加 class1，当条件 B 满足时添加 class2，当条件 C 满足时添加 class3。

我们可以通过在对象中嵌套对象来实现这个需求：

<div [ngClass]="{ 
  'class1': conditionA,
  'class2': { 'conditionB': true }, 
  'class3': { 'conditionC': isConditionCMet() }
}"></div>

上面的代码中，我们定义了一个对象，键是要添加的 CSS 类名，值是一个对象或一个 boolean 值。当值为一个 boolean 值时，Angular 会自动将其转换为 { key: value } 的形式，即如果值为 true，就会添加这个 CSS 类名，否则就不添加。如果值是一个对象，对象的键是表示条件的属性名，值是表示条件是否满足的 boolean 值。

可以看到，class1 是最简单的情况，只需要根据条件 A 的值来决定要不要添加这个 CSS 类。对于 class2，我们使用了一个嵌套对象，这个对象的键是 conditionB，值为 true，表示当条件 B 满足时添加这个 CSS 类。对于 class3，我们使用了一个函数来返回一个对象，对象的键是 conditionC，值是 isConditionCMet() 的返回值，表示当条件 C 满足时添加这个 CSS 类。

总结

ngClass 指令非常灵活，可以根据多个条件来动态地添加或移除 CSS 类。我们可以将要添加的 CSS 类名表示为一个字符串、一个对象或一个数组。如果要根据多个条件来添加 CSS 类，则可以在对象中嵌套对象来实现这个需求。我们可以在对象中使用 boolean 值、函数或变量来表示条件的满足程度。