建站
咨詢
售后
建站咨詢
新聞中心
angular2的routerLinkActive指令在路由激活時添加樣式class
目前成都創(chuàng)新互聯(lián)公司已為超過千家的企業(yè)提供了網(wǎng)站建設、域名、網(wǎng)頁空間、網(wǎng)站托管、服務器租用、企業(yè)網(wǎng)站設計、榮成網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
.red{
color: red;
}
login當url是user或者/user/login的時候，a標簽將會被加上classred。當url變化為別的時，class將會被移除。
如何添加兩個class
routerLinkActive的兩種寫法
也可以給routerLinkActive進行配置參數(shù)
傳遞exact: true表示路由完全匹配時才高亮，如
使用isActive檢查當前是否路由處于激活狀態(tài)
如果當前路由處于激活狀態(tài)，則會顯示：login 激活
非激活狀態(tài)
login 未激活
上述的 rla 為routerLinkActive縮寫，它可以隨便定義。
重點來了： 使用routerLink元素的父元素上使用RouterLinkActive指令
是不是給每個路由都分別添加樣式好費事？給它父元素添加上路由高亮指令即可解決問題！
只要給a標簽的父元素div添加上routerLinkActive和routerLinkActiveOptions， 當路由是/user/login或/user/reset時其所在dom元素分別被添加上red樣式。 這里需要注意的是要添加上routerLinkActiveOptions指定完全匹配，不然會出現(xiàn)url為user時兩個路由均被匹配上添加了red樣式。
總結
以上所述是小編給大家介紹的angular2路由之routerLinkActive指令，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
分享名稱：angular2路由之routerLinkActive指令【推薦】
標題網(wǎng)址：http://www.dlmjj.cn/article/jciosc.html
