Angular中ngClass和ngStyle如何使用

這篇文章主要講解了“Angular中ngClass和ngStyle如何使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Angular中ngClass和ngStyle如何使用”吧！

項目場景：

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

問題描述

例如：網站的兩個頁面需要用到同樣一段代碼，重復寫兩遍不符合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如何使用”的內容了，經過本文的學習后，相信大家對Angular中ngClass和ngStyle如何使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！