成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

roland_reed / 1895人閱讀

摘要：接下來我們就來具體看看如果在組件中使用樣式綁定。優(yōu)先級最高，會覆蓋已有的樣式屬性。直接綁定類名，或者類型的變量。

引言

開發(fā)ngx（angular 2+ 以后都直接稱為ngx）也有1年半的時間了，剛開始開發(fā)的時候使用的還是angular2 RC版，現(xiàn)在已經(jīng)出angular5了，時光飛逝啊！
ngx從設(shè)計之初就是一個component-based的框架，所以大到一個頁面，小到一個按鈕，都是一個component。
這就涉及到了組件的重用，設(shè)計通用組件的時候，必不可少的就是動態(tài)的樣式綁定。
回頭想想， angular還真是給我們提供了好幾種屬性綁定的方式呢。
接下來我們就來具體看看如果在組件中使用樣式綁定。

style binding [style.propertyName]

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

假如在不同的頁面中按鈕的大小要不同，這個時候就需要動態(tài)綁定button的字體大小，可以使用[style.propertyName]來實現(xiàn)。

template中代碼

Component類中代碼

private fontSize: string = "2em";

結(jié)果如圖：

假如我們還需要動態(tài)設(shè)置button的邊框半徑border-radius，

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

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

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

則結(jié)果變成：

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

[ngStyle]

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

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

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

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

結(jié)果為：

[style.propertyName] vs. [ngStyle]

[style.propertyName]每次只能綁定一個屬性
而 [ngStyle] 則可以同時綁定多個屬性
當[style.propertyName] 和 [ngStyle] 綁定同一個屬性時，比如都需要動態(tài)修改font-size, [style.propertyName]則會覆蓋[ngStyle]里面的同一屬性.

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

class binding [class.className]

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

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

//template


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

//Component Class
private changeBorder: boolean = true;

結(jié)果如圖：

看著字體有點小啊，我們再動態(tài)添加一個改變字體的class：my
這個時候代碼就變?yōu)榱耍?/p> 

//template


//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也給我們提供了一個指令[ngClass]來動態(tài)綁定多個css class。
那么我們可以使用[ngClass]對上面的代碼重構(gòu)一下

//template


//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]需要綁定一個object，key是css類名， value是綁定的變量。

[class.className] vs. [ngClass]

[class.className]每次只能綁定一個CSS類。
而 [ngClass] 則可以同時綁定多個CSS類。
當[class.className] 和 [ngClass] 需要動態(tài)修改同一個樣式時，比如都需要動態(tài)修改font-size, [class.className]則會覆蓋[ngClass]里面的統(tǒng)一樣式.

[className]

angular還提供一種綁定方式，就是直接通過修改元素的className來動態(tài)改變樣式。
但我不推薦這種使用方式，為什么不推薦？ 看下面的例子

//template


//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被移除了， 就是因為[className]會添加動態(tài)綁定的類名，然后移除之前所有的類名。
所以這種綁定方式是很有危險性的，因為針對一個組件，我們通常都會有很多種類來共同控制樣式。
在通用組件中，非常不推薦使用[className]。

總結(jié)

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112988.html

相關(guān)文章

  • Angularjs 1 深度解析：組件化編程

    摘要：一個高度可復(fù)用的組件則可以被稱為控件，是可以單獨投稿項目庫的。行為的定制化通過參數(shù)綁定實現(xiàn)組件行為的定制化。組件被銷毀時調(diào)用。當有組件復(fù)用的情況時請使用標識指定接收對象模型另外最好給事件名添加組件前綴。 轉(zhuǎn)自自己在開源中國的博客：https://my.oschina.net/u/7247... angular 1 也要面向組件編程 前端組件化是前端開發(fā)模式中一個不可逆轉(zhuǎn)的趨勢，三大主要...

    caohaoyu 評論0 收藏0

  • Angular 2.x 從 0 到 1 (二）史上最簡單的 Angular2 教程

    摘要：下面我們看看如果使用是什么樣子的，首先我們需要在組件的修飾器中配置，然后在組件的構(gòu)造函數(shù)中使用參數(shù)進行依賴注入。 第一節(jié)：Angular 2.0 從0到1 （一）第二節(jié)：Angular 2.0 從0到1 （二）第三節(jié)：Angular 2.0 從0到1 （三） 第二節(jié)：用Form表單做一個登錄控件 對于login組件的小改造 在 hello-angularsrcapploginlogin...

    warkiz 評論0 收藏0

  • Angular（01）-- 架構(gòu)概覽

    摘要：正文架構(gòu)概覽正文架構(gòu)概覽接觸大概一個月吧，期間寫了個項目，趁現(xiàn)在稍微有點時間，來回顧梳理一下。里的模塊，并不等同于項目中的模塊概念。當然，這只是我目前階段的理解。聲明 本系列文章內(nèi)容梳理自以下來源： Angular 官方中文版教程 官方的教程，其實已經(jīng)很詳細且易懂，這里再次梳理的目的在于復(fù)習和鞏固相關(guān)知識點，剛開始接觸學習 Angular 的還是建議以官網(wǎng)為主。 因為這系列文章，更多的會...

    bitkylin 評論0 收藏0

  • Angular 4 簡單入門筆記

    摘要：首先，我們需要在入口頁面的中配置根路徑然后創(chuàng)建一個路由模塊路由配置在主模塊中導(dǎo)入配置好的路由模塊而在頁面中需要一個容器去承載上面代碼中的定義了用戶點擊后的路由跳轉(zhuǎn)，定義該路由激活時的樣式類。 剛實習的時候用過AngularJS，那時候真的是連原生JavaScript都不會寫，依樣畫葫蘆做了幾個管理后臺。然后突然換項目了，AngularJS就不寫了，感覺前前后后接觸了一年多的Angula...

    whlong 評論0 收藏0

發(fā)表評論

0條評論

roland_reed

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<