【Angular】Angular 2+ 樣式綁定解析

引言

開發ngx（angular 2+ 之後都直接稱爲ngx）也有1年半的時間了，剛開始開發的時候使用的仍是angular2 RC版，如今已經出angular5了，時光飛逝啊！
ngx從設計之初就是一個component-based的框架，因此大到一個頁面，小到一個按鈕，都是一個component。
這就涉及到了組件的重用，設計通用組件的時候，必不可少的就是動態的樣式綁定。
回頭想一想， angular還真是給咱們提供了好幾種屬性綁定的方式呢。
接下來咱們就來具體看看若是在組件中使用樣式綁定。

style binding

[style.propertyName]

咱們有一個button，默認的樣式是bootstrap的primary,

假如在不一樣的頁面中按鈕的大小要不一樣，這個時候就須要動態綁定button的字體大小，可使用[style.propertyName]來實現。

template中代碼

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

Component類中代碼

private fontSize: string = "2em";

結果如圖：

假如咱們還須要動態設置button的邊框半徑border-radius，

template中代碼則變爲：

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

Component類中代碼則變爲：

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

則結果變成：

使用[style.propertyName]來綁定樣式屬性當然不粗，但是一旦有新的需求，咱們就須要繼續加上咱們須要綁定的屬性， 這個時候組件上綁定的屬性就會愈來愈多，咱們有沒有辦法來建立一個object來存儲咱們須要綁定的屬性呢？ 固然有，[ngStyle]就能夠幫咱們來作這件事情。

[ngStyle]

因此上面的例子，咱們就能夠直接使用[ngStyle]來動態綁定button的font-size和border-radius。

template中的代碼則變爲：

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

Component類的代碼則變爲：

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

結果爲：

[style.propertyName] vs. [ngStyle]

[style.propertyName]每次只能綁定一個屬性
而 [ngStyle] 則能夠同時綁定多個屬性
當[style.propertyName] 和 [ngStyle] 綁定同一個屬性時，好比都須要動態修改font-size, [style.propertyName]則會覆蓋[ngStyle]裏面的同一屬性.

固然除了style binding, 咱們還可使用class binding來動態修改樣式。

class binding

[class.className]

使用這種方式，咱們能夠根據綁定變量的值來動態添加或者移除css class。
仍是使用剛纔button的例子。

則代碼變爲：

//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;

結果如圖：

看着字體有點小啊，咱們再動態添加一個改變字體的class：my
這個時候代碼就變爲了：

//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;

結果如圖：

[ngClass]

像[ngStyle]同樣，angular也給咱們提供了一個指令[ngClass]來動態綁定多個css class。
那麼咱們可使用[ngClass]對上面的代碼重構一下

//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;

結果依舊爲：

[ngClass]須要綁定一個object，key是css類名， value是綁定的變量。

[class.className] vs. [ngClass]

[class.className]每次只能綁定一個CSS類。
而 [ngClass] 則能夠同時綁定多個CSS類。
當[class.className] 和 [ngClass] 須要動態修改同一個樣式時，好比都須要動態修改font-size, [class.className]則會覆蓋[ngClass]裏面的統同樣式.

[className]

angular還提供一種綁定方式，就是直接經過修改元素的className來動態改變樣式。
但我不推薦這種使用方式，爲何不推薦？ 看下面的例子

//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";

結果卻變成了這樣：

咱們預先設置好的bootstrap的primary被移除了， 就是由於[className]會添加動態綁定的類名，而後移除以前全部的類名。
因此這種綁定方式是頗有危險性的，由於針對一個組件，咱們一般都會有不少種類來共同控制樣式。
在通用組件中，很是不推薦使用[className]。

總結

最後再來總結下angular中各類樣式綁定的特色和區別：[style.propertyName] 直接綁定一個string類型的樣式值，或者string類型的變量。優先級最高，會覆蓋已有的樣式屬性。[ngStyle]綁定一個樣式組合的object，key是css屬性名，value是對應的樣式值，或者string類型的變量。[class.className] 直接綁定true/false, 或者boolean類型的變量。[ngClass]綁定一個css類名組合的object，key是css類名，value是true/false 或者boolean類型的變量。[className] 直接綁定css類名，或者string類型的變量。 （不推薦使用這種方式）