Angular 2+ 樣式綁定有哪些方式

這篇文章主要介紹了解析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]= "{&#39;btnFont&#39;: changeFont, &#39;btnBorder&#39;: 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中各種樣式綁定的特性與差異：

1. [style. propertyName] 直接綁定一個string類型的樣式值，或是string類型的變數。優先權最高，會覆寫已有的樣式屬性。

2. [ngStyle]綁定一個樣式組合的object，key是css屬性名，value是對應的樣式值，或是string類型的變數。

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

4. [ngClass]綁定一個css類別名稱組合的object，key是css類別名，value是true/false 或是boolean類型的變數。

5. [className] 直接綁定css類別名，或是string類型的變數。 （不建議使用這種方式）

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

透過vue中v-for實作載入本機靜態圖片方法（詳細教學）

在vue中如何解決v-for使用報紅並出現警告的問題（詳細教學）

在Vuejs中如何實作搜尋比對功能方法（詳細教學）

#在vue.js中利用select下拉框實作綁定和取值方法

#透過Vuejs在v-for中,利用index來對第一項加入class的方法以及具體操作步驟？

以上是Angular 2+ 樣式綁定有哪些方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！