angular2的routerLinkActive指令在路由激活時添加樣式class

.red{ color: red;} <a routerLink="/user/login" routerLinkActive="red">login</a>

當url是user或者/user/login的時候，a標簽將會被加上classred。當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進行配置參數

傳遞exact: true表示路由完全匹配時才高亮，如

<a routerLink="/user/login" routerLinkActive="red" [routerLinkActiveOptions]="{exact: true}">login</a>

使用isActive檢查當前是否路由處于激活狀態   

<a routerLink="/user/login" routerLinkActive #rla="routerLinkActive"> login {{ rla.isActive ? '激活' : '未激活'}}</a>

如果當前路由處于激活狀態，則會顯示：login 激活

非激活狀態

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標簽的父元素div添加上routerLinkActive和routerLinkActiveOptions， 當路由是/user/login或/user/reset時其所在dom元素分別被添加上red樣式。 這里需要注意的是要添加上routerLinkActiveOptions指定完全匹配，不然會出現url為user時兩個路由均被匹配上添加了red樣式。

總結

以上所述是小編給大家介紹的angular2路由之routerLinkActive指令，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！