JavaScript初学者：使用ngClass分配动态类

在Web应用程序中，根据条件调整元素外观是一个常见的需求。有几种实现这一目标的方法，但如果您正在使用Angular，那么选择就很明显了。ngClass指令提供了多种方法来动态地为元素或组件分配类名。它的语法既简洁又支持相当复杂的逻辑，可以精细控制我们的类名以及设置它们的条件。在本教程中，我们将介绍使用ngClass指令动态分配CSS类到元素的一些常见方法。

使用[className]属性绑定分配CSS类

虽然本文是关于ngClass指令的，值得注意的是，在许多情况下，您甚至不需要它！借助[className]属性绑定，我们可以通过原生JavaScriptclassName属性使用[]绑定语法设置类。我们可以在绑定内执行任何返回字符串的语句。这使我们能够根据条件设置一个或多个类：

<div [className]="isActive ? 'active-class' : 'inactive-class'"></div>

我们还可以在运行时构建类名：

<div [className]="'class' + someValue"></div>

阅读： 每位Web开发者都应该了解的5个JavaScript概念

通过[className]属性绑定进行类切换

有些人认为上述的类切换技术比必要的要复杂一些，因为inactive-class可能是默认值。如果你持有这种观点，你可以使用[class.class-name]语法来提供一个需要评估的条件：

<div 
  class="inactive" 
  [class.active]="isActive">
</div>

因此，如果我们可以通过[className]属性绑定来有条件地设置一个类，那为什么我们还需要ngClass指令呢？正如我们将看到的，使用ngClass指令的真正原因是它可以帮助我们在多个类之间进行选择。

深入了解ngClass指令

在深入了解如何使用ngClass指令之前，看一下它的定义会很有帮助：

@Input('class')
klass: string

@Input()
ngClass: string | string[] | Set<string> | { [klass: string]: any; }

从上面的代码可以看出，之前使用的[class]语法实际上是ngClass指令的一部分，通过@Input('class')。同时注意到ngClass指令提供了至少四种设置动态类的选项！

让我们更详细地看看每一种。

提供一个字符串或字符串数组

将字符串或字符串数组赋给ngClass可以将动态类绑定到Angular变量。假设我们有一个名为activeClass的变量。在我们的.ts文件中，我们可以根据某些操作的结果将其设置为已知的类名，比如"text-success"或"text-failure"：

<div 
  [ngClass]="activeClass">
</div>

数组语法对于将多个类应用到同一元素或组件很有用：

<div 
  [ngClass]="[activeClass, openClass]">
</div>

使用一个评估表达式

使用ngClass的一种稍微高级但非常有用的方法是提供一个表达式。只有当变量或表达式评估为true时，才会应用提供的类。为了提供一个表达式，您必须使用花括号{}提供一个对象。在每个冒号的左边（属性名）是将应用的类；在右边（属性值）是您要评估的表达式或变量。这里是一个例子：

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" [ngModel]="redText"> Toggle red text.
<input type="checkbox" [ngModel]="largeFont"> Toggle large text.

<div [ngClass]="{ 'text-red': redText, 'text-large': largeFont }">

阅读： React、Angular和Vue.js：技术上有什么区别？

使用三元运算符

三元运算符允许您根据布尔表达式（布尔字段或评估为布尔结果的语句）为变量分配一个值。在其最基本的形式下，三元运算符，也称为条件运算符，可用作在设置变量时替代if/then/else语句的替代方案。

将三元运算符提供给ngClass使我们能够指定两个不同的类：一个用于表达式为true，另一个用于false。以下是三元运算符的基本语法：

[ngClass]="expression or variable ? true class : false class"

这是一个使用三元运算符的代码示例，根据两个变量是否相等来设置DIV的类：

<div [ngClass]="varA === varB ? 'css-class-1' : 'css-class-2'">

ngClass签名：Set<string>：不受欢迎也不受宠爱

Set 是 ES6 中引入的一种新的数据结构，类似于 Map。TypeScript 中的 Set 允许我们使用诸如 add()、has() 和 delete() 等方法将不同的值存储到一个列表中。出于某种原因，Set<string> ngClass 签名从未真正流行起来。我从未使用过它，也不知道有谁使用过。

话虽如此，Set 应该包含表示要应用到元素或组件的类名的字符串。这里有一些创建名为 classes 的 Set 的 TypeScript 代码：

//声明一个类成员变量
public classes = new Set();
 
//添加类名
classes.add('active').add('text-large');

结论

在本教程中，我们介绍了一些动态为元素分配 CSS 类的最常见方法，使用了 ngClass 指令。如你所见，这是非常强大的功能。