angular2路由之routerLinkActive指令【推薦】
angular2的routerLinkActive指令在路由激活時添加樣式class
.red{
color: red;
}
<a routerLink="/user/login" routerLinkActive="red">login</a>
當(dāng)url是user或者/user/login的時候，a標(biāo)簽將會被加上classred。當(dāng)url變化為別的時，class將會被移除。
如何添加兩個class
<a routerLink="/user/login" routerLinkActive="class1 class2">login</a>
routerLinkActive的兩種寫法
<a routerLink="/user/login" routerLinkActive="class1 class2">login</a> <a routerLink="/user/login" [routerLinkActive]="['class1', 'class2']">login</a>
也可以給routerLinkActive進(jìn)行配置參數(shù)
傳遞exact: true表示路由完全匹配時才高亮，如
<a routerLink="/user/login" routerLinkActive="red" [routerLinkActiveOptions]="{exact: true}">login</a>
使用isActive檢查當(dāng)前是否路由處于激活狀態(tài)
<a routerLink="/user/login" routerLinkActive #rla="routerLinkActive">
login {{ rla.isActive ? '激活' : '未激活'}}
</a>
如果當(dāng)前路由處于激活狀態(tài)，則會顯示：login 激活
非激活狀態(tài)
login 未激活
上述的 rla 為routerLinkActive縮寫，它可以隨便定義。
重點來了： 使用routerLink元素的父元素上使用RouterLinkActive指令
是不是給每個路由都分別添加樣式好費事？給它父元素添加上路由高亮指令即可解決問題！
<div routerLinkActive="red" [routerLinkActiveOptions]="{exact: true}">
<a routerLink="/user/login">login</a>
<a routerLink="/user/reset">reset</a>
</div>
只要給a標(biāo)簽的父元素div添加上routerLinkActive和routerLinkActiveOptions， 當(dāng)路由是/user/login或/user/reset時其所在dom元素分別被添加上red樣式。 這里需要注意的是要添加上routerLinkActiveOptions指定完全匹配，不然會出現(xiàn)url為user時兩個路由均被匹配上添加了red樣式。
總結(jié)
以上所述是小編給大家介紹的angular2路由之routerLinkActive指令，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
在AngularJS中如何使用谷歌地圖把當(dāng)前位置顯示出來
這篇文章給的大家介紹在AngularJS中如何使用谷歌地圖把當(dāng)前位置顯示出來，本文介紹的非常詳細(xì)，具有參考借鑒價值，對angularjs 谷歌地圖相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
淺析如何利用angular結(jié)合translate為項目實現(xiàn)國際化
利用angular進(jìn)行國際化轉(zhuǎn)換時利用【ng-bind-html】來進(jìn)行語言的翻譯是接近幾乎比較完美的方案，不會像利用【{{}}】模式，當(dāng)頁面加載緩慢時導(dǎo)致頁面太丑。本文對其實現(xiàn)方法進(jìn)行介紹，有需要的朋友可以看下2016-12-12
本篇文章主要介紹了Angularjs使用指令做表單校驗的方法，詳細(xì)的介紹了用指令做校驗的方法，具有一定的參考價值，有興趣的可以了解一下。2017-03-03
這篇文章主要為大家介紹了AngularJs動態(tài)加載模塊和依賴注入，感興趣的小伙伴們可以參考一下2016-01-01
angular4 如何在全局設(shè)置路由跳轉(zhuǎn)動畫的方法
本篇文章主要介紹了angular4 如何在全局設(shè)置路由跳轉(zhuǎn)動畫的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
AngularJS中update兩次出現(xiàn)$promise屬性無法識別的解決方法
最近在工作中用AngularJS中update了兩次之后發(fā)現(xiàn)$promise屬性無法識別了，后來通過查找相關(guān)的資料終于解決了，想著記錄下方便自己或者有需要的朋友，所以本文主要介紹了AngularJS中update兩次出現(xiàn)了$promise屬性無法識別的解決方法,需要的朋友可以參考借鑒。2017-01-01
今天小編就為大家分享一篇Angular2之二級路由詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了深入理解Angular4訂閱(Subscribe)與取消，詳細(xì)的介紹了訂閱與取消的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
本篇文章主要介紹了詳解Angular 4.x NgIf，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了AngularJS實現(xiàn)Model緩存的方式，分享了多種AngularJS實現(xiàn)Model緩存的方法，感興趣的小伙伴們可以參考一下2016-02-02