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

前端（vue）入門到精通課程，老師線上輔導：聯絡老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

專案場景：

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

問題描述

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

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

<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]="{'background-color':'green'}">
xxxx
</div>

複雜用法（html檔案）：

//如果當前頁面為主頁則將背景色改為綠色，否則改為紅色
<div [ngStyle]="{'background-color':pageName== 'homepage' ? 'green' : 'red' }">
xxxx
</div>

2.[ngClass]

<any [ngClass]=「obj」>

說明：

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

簡單用法（html檔案）：

//使用.homepageText樣式
<div [ngClass]="{'homepageText':true}">
xxxx
</div>

複雜用法（html檔案）：

//當頁面名稱是homepage時使用.homepageText樣式，否則不使用
<div [ngClass]="{'homepageText':pageName =='homepage'}">
xxxx
</div>

（css檔案）：

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

解決方案：

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

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

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

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

更多程式設計相關知識，請存取：！！

以上就是Angular學習之詳解樣式繫結（ngClass和ngStyle）的使用的詳細內容，更多請關注TW511.COM其它相關文章！