在 Angular 中新增類

Rana Hasnain Khan 2023年1月30日
  1. 在 Angular 中新增靜態或動態類
  2. 在 Angular 中使用 NgClass
在 Angular 中新增類

我們將介紹不同的方法,如 classNamengClass 在 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>

當條件 loggedIntrue 時,它將分配類 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>

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

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

相關文章 - Angular Class