Angular2+樣式綁定方式的示例分析

這篇文章主要為大家展示了“Angular2+樣式綁定方式的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Angular2+樣式綁定方式的示例分析”這篇文章吧。

引言

開(kāi)發(fā)ngx（angular 2+ 以后都直接稱為ngx）也有1年半的時(shí)間了，剛開(kāi)始開(kāi)發(fā)的時(shí)候使用的還是angular2 RC版，現(xiàn)在已經(jīng)出angular5了，時(shí)光飛逝?。?br/>

ngx從設(shè)計(jì)之初就是一個(gè)component-based的框架，所以大到一個(gè)頁(yè)面，小到一個(gè)按鈕，都是一個(gè)component。

這就涉及到了組件的重用，設(shè)計(jì)通用組件的時(shí)候，必不可少的就是動(dòng)態(tài)的樣式綁定。

回頭想想， angular還真是給我們提供了好幾種屬性綁定的方式呢。

接下來(lái)我們就來(lái)具體看看如果在組件中使用樣式綁定。

style binding

[style.propertyName]

我們有一個(gè)button，默認(rèn)的樣式是bootstrap的primary,

假如在不同的頁(yè)面中按鈕的大小要不同，這個(gè)時(shí)候就需要?jiǎng)討B(tài)綁定button的字體大小，可以使用[style.propertyName]來(lái)實(shí)現(xiàn)。

template中代碼

<button 
  class="btn btn-primary" 
  [style.fontSize]="fontSize">
  Style Binding
</button>

Component類中代碼

private fontSize: string = "2em";

結(jié)果如圖：

假如我們還需要?jiǎng)討B(tài)設(shè)置button的邊框半徑border-radius，

template中代碼則變?yōu)椋?/p>

<button 
  class="btn btn-primary" 
  [style.fontSize]="fontSize"
  [style.borderRadius]="borderRadius">
  Style Binding
</button>

Component類中代碼則變?yōu)椋?/p>

private fontSize: string = "2em";
private borderRadius: string = "10px";

則結(jié)果變成：

使用[style.propertyName]來(lái)綁定樣式屬性固然不粗，可是一旦有新的需求，我們就需要繼續(xù)加上我們需要綁定的屬性， 這個(gè)時(shí)候組件上綁定的屬性就會(huì)越來(lái)越多，我們有沒(méi)有辦法來(lái)創(chuàng)建一個(gè)object來(lái)存儲(chǔ)我們需要綁定的屬性呢？ 當(dāng)然有，[ngStyle]就可以幫我們來(lái)做這件事情。

[ngStyle]

所以上面的例子，我們就可以直接使用[ngStyle]來(lái)動(dòng)態(tài)綁定button的font-size和border-radius。

template中的代碼則變?yōu)椋?/p>

<button 
  class="btn btn-primary" 
  [ngStyle]="btnStyle" >
  Style Binding
</button>

Component類的代碼則變?yōu)椋?/p>

private btnStyle: any = {
  borderRadius: "10px",
  fontSize: "2em"
};

結(jié)果為：

[style.propertyName] vs. [ngStyle]

[style.propertyName]每次只能綁定一個(gè)屬性

而 [ngStyle] 則可以同時(shí)綁定多個(gè)屬性

當(dāng)[style.propertyName] 和 [ngStyle] 綁定同一個(gè)屬性時(shí)，比如都需要?jiǎng)討B(tài)修改font-size, [style.propertyName]則會(huì)覆蓋[ngStyle]里面的同一屬性.

當(dāng)然除了style binding, 我們還可以使用class binding來(lái)動(dòng)態(tài)修改樣式。

class binding

[class.className]

使用這種方式，我們可以根據(jù)綁定變量的值來(lái)動(dòng)態(tài)添加或者移除css class。
還是使用剛才button的例子。

則代碼變?yōu)椋?/p>

//template
<button 
  class="btn btn-primary" 
  [class.btnBorder]="changeBorder" >
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}

//Component Class
private changeBorder: boolean = true;

結(jié)果如圖：

看著字體有點(diǎn)小啊，我們?cè)賱?dòng)態(tài)添加一個(gè)改變字體的class：my

這個(gè)時(shí)候代碼就變?yōu)榱耍?/p>

//template
<button 
  class="btn btn-primary" 
  [class.btnBorder]="changeBorder" [class.btnFont]="changeFont" >
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}
.btnFont {
 font-size: 2em;
 font-weight: bold;
}

//Component Class
private changeBorder: boolean = true;
private changeFont: boolean = true;

結(jié)果如圖：

[ngClass]

像[ngStyle]一樣，angular也給我們提供了一個(gè)指令[ngClass]來(lái)動(dòng)態(tài)綁定多個(gè)css class。

那么我們可以使用[ngClass]對(duì)上面的代碼重構(gòu)一下

//template
<button 
  class="btn btn-primary" 
  [ngClass]= "{'btnFont': changeFont, 'btnBorder': changeBorder}">
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}
.btnFont {
 font-size: 2em;
 font-weight: bold;
}

//Component Class
private changeBorder: boolean = true;
private changeFont: boolean = true;

結(jié)果依舊為：

[ngClass]需要綁定一個(gè)object，key是css類名， value是綁定的變量。

[class.className] vs. [ngClass]

[class.className]每次只能綁定一個(gè)CSS類。

而 [ngClass] 則可以同時(shí)綁定多個(gè)CSS類。

當(dāng)[class.className] 和 [ngClass] 需要?jiǎng)討B(tài)修改同一個(gè)樣式時(shí)，比如都需要?jiǎng)討B(tài)修改font-size, [class.className]則會(huì)覆蓋[ngClass]里面的統(tǒng)一樣式.

[className]

angular還提供一種綁定方式，就是直接通過(guò)修改元素的className來(lái)動(dòng)態(tài)改變樣式。

但我不推薦這種使用方式，為什么不推薦？ 看下面的例子

//template
<button 
  class="btn btn-primary" 
  [className]="changedFont">
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}
.btnFont {
 font-size: 2em;
 font-weight: bold;
}

//Component Class
private changedFont: string = "btnFont";

結(jié)果卻變成了這樣：

我們預(yù)先設(shè)置好的bootstrap的primary被移除了， 就是因?yàn)閇className]會(huì)添加動(dòng)態(tài)綁定的類名，然后移除之前所有的類名。
所以這種綁定方式是很有危險(xiǎn)性的，因?yàn)獒槍?duì)一個(gè)組件，我們通常都會(huì)有很多種類來(lái)共同控制樣式。

在通用組件中，非常不推薦使用[className]。

總結(jié)

最后再來(lái)總結(jié)下angular中各種樣式綁定的特點(diǎn)和區(qū)別：

1. [style.propertyName] 直接綁定一個(gè)string類型的樣式值，或者string類型的變量。優(yōu)先級(jí)最高，會(huì)覆蓋已有的樣式屬性。

2. [ngStyle]綁定一個(gè)樣式組合的object，key是css屬性名，value是對(duì)應(yīng)的樣式值，或者string類型的變量。

3. [class.className] 直接綁定true/false, 或者boolean類型的變量。

4. [ngClass]綁定一個(gè)css類名組合的object，key是css類名，value是true/false 或者boolean類型的變量。

5. [className] 直接綁定css類名，或者string類型的變量。 （不推薦使用這種方式）

以上是“Angular2+樣式綁定方式的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！