這篇文章主要講解了“Angular中ngClass和ngStyle如何使用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Angular中ngClass和ngStyle如何使用”吧！
成都創(chuàng)新互聯(lián)公司專注于企業(yè)成都全網(wǎng)營(yíng)銷、網(wǎng)站重做改版、大興網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為大興等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
前端開發(fā)中經(jīng)常會(huì)遇到這樣一種情況：不同的頁(yè)面會(huì)共用同一段代碼，同時(shí)我們要根據(jù)頁(yè)面的具體信息或者某種操作（例如點(diǎn)擊某個(gè)按鈕）去決定是否展示這段代碼或使頁(yè)面樣式做出一定的改變，這時(shí)就用到我們angular中的樣式綁定！
例如：網(wǎng)站的兩個(gè)頁(yè)面需要用到同樣一段代碼，重復(fù)寫兩遍不符合dry（don’t repeat yourself）原則，效率也很低，所以公司里angular的前端開發(fā)項(xiàng)目中通常不會(huì)這么做。如果有一天領(lǐng)導(dǎo)告訴你：zzz，麻煩你改下代碼，這句提示語我在這個(gè)頁(yè)面想要呈現(xiàn)這個(gè)效果，在另一個(gè)頁(yè)面要那個(gè)效果，這時(shí)你該怎么辦呢？下面以一個(gè)簡(jiǎn)單的例子來說明。
公用的代碼片段（修改前）：
angular中的樣式綁定可以實(shí)現(xiàn)上述需求，angular有兩種樣式綁定指令：[ngStyle]，[ngClass]
注意：使用時(shí)必須用[ ] 方括號(hào)把他們括起來!
1.[ngStyle]
說明：
any代表樣式綁定的標(biāo)簽類型可以是任何類型，比如是div,p,span等等都行。
在這里插入代碼片ngStyle綁定的值必須是一個(gè)對(duì)象。
對(duì)象屬性就是css樣式名，對(duì)象的值是具體的樣式。
簡(jiǎn)單用法（html文件）：
//將這段div的背景色改為綠色
復(fù)雜用法（html文件）：
//如果當(dāng)前頁(yè)面為主頁(yè)則將背景色改為綠色，否則改為紅色
2.[ngClass]
說明：
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樣式
復(fù)雜用法（html文件）：
//當(dāng)頁(yè)面名稱是homepage時(shí)使用.homepageText樣式，否則不使用
（css文件）：
.homepageText {
font-size: 14px;
font-weight: bold;
}
以下是開頭問題的解決方案，希望給各位帶來一些啟發(fā)
公用的代碼片段（修改后）：
說明：portal頁(yè)面想要展示normalTxt的效果，detail頁(yè)面想要展示specialTxt的效果。normalTxt和specialTxt具體樣式需要我們?cè)谙鄳?yīng)的.css/.scss文件里添加。
感謝各位的閱讀，以上就是“Angular中ngClass和ngStyle如何使用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)Angular中ngClass和ngStyle如何使用這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
重慶分公司
重慶分公司
