Angular學習之詳解樣式綁定（ngClass和ngStyle）的使用

專案場景：

#前端開發中常會遇到這樣一種情況：不同的頁面會共用同一段程式碼，同時我們要根據頁面的具體資訊或某種操作（例如點擊某個按鈕）去決定是否要展示這段程式碼或讓頁面樣式做出一定的改變，這時就用到我們angular 中的樣式綁定！

---

問題描述

例如：網站的兩個頁面需要用到同樣一段程式碼，重複寫兩遍不符合dry （don't repeat yourself）原則，效率也很低，所以公司裡angular的前端開發專案中通常不會這麼做。如果有一天領導告訴你：zzz，麻煩你改下程式碼，這句提示語我在這個頁面想要呈現這個效果，在另一個頁面要那個效果，這時你該怎麼辦呢？下面以一個簡單的例子來說明。 【相關教學推薦：《angular教學》】

#公用的程式碼片段（修改前）：

<div class="normalTxt">      
	<span >I love angular</span>         
</div>

---

##原因分析：

angular中的樣式綁定可以實現上述需求，angular有兩種樣式綁定指令：

[ngStyle]，[ngClass] # 注意：使用時必須用[ ] 方括號把他們括起來!

1.[ngStyle]

<any [ngStyle]=“obj”>

說明：

#any代表樣式綁定的標籤類型可以是任何類型，例如是div,p,span等等都行。
在這裡插入程式碼片ngStyle綁定的值必須是一個物件。
物件屬性就是css樣式名，物件的值是具體的樣式。

簡單用法（html檔）：

//将这段div的背景色改为绿色
<div [ngStyle]="{&#39;background-color&#39;:&#39;green&#39;}">
xxxx
</div>

複雜用法（html檔）：

//如果当前页面为主页则将背景色改为绿色，否则改为红色
<div [ngStyle]="{&#39;background-color&#39;:pageName== &#39;homepage&#39; ? &#39;green&#39; : &#39;red&#39; }">
xxxx
</div>

2.[ngClass]

<any [ngClass]=“obj”>

說明：

any代表樣式綁定的標籤類型可以是任何類型，例如是div,p,span等等都行。
ngClass綁定的值必須是一個物件。
物件屬性就是 class名，屬性值為boolean型別結果只能為true/false,true的話該class就出現，否則該class不出現。

簡單用法（html檔）：

//使用.homepageText样式
<div [ngClass]="{&#39;homepageText&#39;:true}">
xxxx
</div>

複雜用法（html檔）：

//当页面名称是homepage时使用.homepageText样式，否则不使用
<div [ngClass]="{&#39;homepageText&#39;:pageName ==&#39;homepage&#39;}">
xxxx
</div>

（css檔）：

.homepageText {    
font-size: 14px;
font-weight: bold;
}

---

#解決方案：

以下是開頭問題的解決方案，希望為各位帶來一些啟發

公用的程式碼片段（修改後）：

<div [ngClass]="{&#39;normalTxt&#39;:pageTitle==&#39;portal&#39; ,&#39;specialTxt&#39;:pageTitle==&#39;detail&#39;}">   
   <span>I love angular</span>         
</div>

說明：portal頁面想要展示normalTxt的效果，detail頁面想要展示specialTxt的效果。 normalTxt和specialTxt具體樣式需要我們在對應的.css/.scss檔裡加入。

更多程式相關知識，請造訪：

程式設計入門！ ！

以上是Angular學習之詳解樣式綁定（ngClass和ngStyle）的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！