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

項(xiàng)目場(chǎng)景：

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

問題描述

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

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

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

原因分析：

angular中的樣式綁定可以實(shí)現(xiàn)上述需求，angular有兩種樣式綁定指令：[ngStyle]，[ngClass]
注意：使用時(shí)必須用[ ] 方括號(hào)把他們括起來!

1.[ngStyle]

<any [ngStyle]=“obj”>

說明：

• any代表樣式綁定的標(biāo)簽類型可以是任何類型，比如是div,p,span等等都行。
• 在這里插入代碼片ngStyle綁定的值必須是一個(gè)對(duì)象。
• 對(duì)象屬性就是css樣式名，對(duì)象的值是具體的樣式。

簡(jiǎn)單用法（html文件）：

//將這段div的背景色改為綠色 <div [ngStyle]="{'background-color':'green'}"> xxxx </div>

復(fù)雜用法（html文件）：

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

2.[ngClass]

<any [ngClass]=“obj”>

說明：

• any代表樣式綁定的標(biāo)簽類型可以是任何類型，比如是div,p,span等等都行。
• ngClass綁定的值必須是一個(gè)對(duì)象。
• 對(duì)象屬性就是 class名，屬性值為boolean類型結(jié)果只能為true/false,true的話該class就出現(xiàn)，否則該class不出現(xiàn)。

簡(jiǎn)單用法（html文件）：

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

復(fù)雜用法（html文件）：

//當(dāng)頁面名稱是homepage時(shí)使用.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具體樣式需要我們?cè)谙鄳?yīng)的.css/.scss文件里添加。