JavaScript初學者：使用ngClass指定動態類別

在 Web 應用程式中，根據條件來定制元素的外觀是一個常見的需求。有幾種方法可以實現這一目的，但如果你正在使用 Angular，你的選擇是明確的。ngClass 指令提供了多種方法來動態地為元素或組件分配類名。它的語法既簡潔又支持相當複雜的邏輯，可以讓我們對類名以及設置它們的條件進行細緻控制。在本教程中，我們將介紹一些最常見的使用 ngClass 指令動態分配 CSS 類的方法。

使用 [className] 屬性綁定來分配 CSS 類

儘管本文是關於 ngClass 指令，值得一提的是，在許多情況下，你甚至不需要它！由於 [className] 屬性綁定，我們可以通過原生 JavaScript className 屬性使用 [] 綁定語法來設置類。我們可以在該綁定內執行任何返回字符串的語句。這使我們能夠根據條件設置一個或多個類：

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

我們也可以在運行時構建類名：

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

閱讀： 每位網頁開發人員都應該學習的 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');

结论

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