前端（vue）入門到精通課程，老師在線輔導：聯(lián)系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點擊使用

項目場景：

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

問題描述

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

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

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

原因分析：

angular中的樣式綁定可以實現(xiàn)上述需求，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就出現(xiàn)，否則該class不出現(xiàn)。

簡單用法（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; }

解決方案：

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

公用的代碼片段（修改后）：

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

說明：portal頁面想要展示normalTxt的效果，detail頁面想要展示specialTxt的效果。normalTxt和specialTxt具體樣式需要我們在相應的.css/.scss文件里添加。