在 Angular 中新增類
我們將介紹不同的方法,如 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 指令新增動態、靜態或多個類。
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