在 Angular 中新增類

1. 在 Angular 中新增靜態或動態類
2. 在 Angular 中使用 NgClass

我們將介紹不同的方法，如 className 和 ngClass 在 Angular 中新增靜態或動態類。我們還將介紹如何在 Angular 中切換類。

在 Angular 中新增靜態或動態類

類是任何 Web 應用程式的主要部分。我們根據類名設計和執行不同的功能。

與單頁應用程式框架一樣，Angular 在資料繫結方面大放異彩。如果相應的 JavaScript 物件發生任何變化，DOM 元素會自動更新。

讓我們使用以下命令建立一個新應用程式。

# angular
ng new my-app

在 Angular 中建立我們的新應用程式後，我們將使用此命令轉到我們的應用程式目錄。

# angular
cd my-app

現在，讓我們執行我們的應用程式來檢查所有依賴項是否安裝正確。

# angular
ng serve --open

我們可以將類名繫結到任何 HTML 元素，就像我們通常在 HTML 中新增類名一樣。唯一的區別是我們使用 className 而不是 class，如下所示。

# angular
<div [className]="'my-class'"></div>

上面的程式碼表明它只是一個分配給 div 元素的靜態類。現在讓我們討論如何使用 className 新增動態類。

如下所示，我們可以根據條件更改或新增類到元素。

# angular
<div [className]="loggedIn ? 'logged-class' : 'my-class'"></div>

當條件 loggedIn 為 true 時，它將分配類 logged-class。如果條件為 false，它將分配類 my-class。

我們還可以在執行時構建一個類名，如下所示。

# angular
<div [className]="'class' + myValue"></div>

上面的例子展示了我們新增了一個字串 class 和一個值 myValue，它可以是執行時的任何東西並建立一個類名。

在 Angular 中使用 NgClass

ngClass 是用於使程式碼看起來更精簡的指令，因為它只是語法糖。使用起來方便，時間短。

ngClass 用途廣泛。因此，讓我們檢查一下如何使用 ngClass，如下所示。

# angular
<div [ngClass]="'myclass'"></div>

ngClass 還可以幫助我們新增多個類名，如下所示。

# angular
<div [ngClass]="['my-class','second-class']"></div>

我們還可以使用條件來分配類名並根據條件切換它們，如下所示。

# angular
<div
  [ngClass]="{
  'my-class': loggedIn
}"
></div>

如下圖，我們也可以根據兩個不同的條件分配多個類。

# angular
<div
  [ngClass]="{
  'my-class': loggedIn,
  'second-class': !loggedIn
}"
></div>

我們還可以使用兩種不同的條件，如下所示。

# angular
<div
  [ngClass]="{
  'my-class': loggedIn,
  'second-class': myValue
}"
></div>

因此，通過這種方式，我們可以使用 ClassName 和 ngClass 根據條件輕鬆分配類。我們還學習了使用 Angular 指令新增動態、靜態或多個類。