AngularJS2中一種button切換效果的實(shí)現(xiàn)方法（二）

創(chuàng)新互聯(lián)建站從2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元蒙陰做網(wǎng)站,已為上家服務(wù),為蒙陰各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

之前用三目表達(dá)式和ng-class實(shí)現(xiàn)了按鈕切換效果，似乎達(dá)到了我的預(yù)期，但是我覺得還有改進(jìn)空間，網(wǎng)上找了一些資料，大概還有以下幾種實(shí)現(xiàn)方式：

路由

.active {
 background-color: white;
}

將button切換的頁(yè)面寫成一個(gè)component，通過routerLink鏈接到對(duì)應(yīng)的component并顯示出來，routerLinkActive來控制路由鏈接激活后button的樣式應(yīng)用的class。

但是這個(gè)有局限性，適合button按下去后，整個(gè)頁(yè)面會(huì)有大幅變化的應(yīng)用場(chǎng)景，那么還有其他方法嗎？答案是肯定的。

[class]與(click)

還是通過ngclass和ngclick配合，不過方法和之前寫的略有不同。

字符串?dāng)?shù)組形式

.btn1{
 width: 120px;
 height: 43px;
 border: 1px solid #EEEEEE;
 background: white;
 border-bottom: none;
 text-align: center;
}
.btn2{
 border: 1px solid #EEEEEE;
 border-top: 2px solid #238FF9;
 width: 120px;
 height: 42px;
 background: white;
 border-bottom: none;
 text-align: center;
}

字符串?dāng)?shù)組形式是針對(duì)class簡(jiǎn)單變化，具有排斥性的變化，true是什么class，false是什么class。若要設(shè)置初識(shí)狀態(tài)的class，可以在component中的構(gòu)造函數(shù)中預(yù)先賦值。

對(duì)象key/value處理

這種方法可以對(duì)多個(gè)對(duì)象賦不同的class。或者可以實(shí)現(xiàn)多個(gè)button互斥性變化：