angular2路由之routerLinkActive指令【推薦】
angular2的routerLinkActive指令在路由激活時添加樣式class
.red{
color: red;
}
<a routerLink="/user/login" routerLinkActive="red">login</a>
當(dāng)url是user或者/user/login的時候，a標簽將會被加上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進行配置參數(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標簽的父元素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)文章
本篇文章主要介紹了Angular CLI 安裝和使用教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
利用Angularjs中模塊ui-route管理狀態(tài)的方法
這篇文章主要給大家介紹了如何用Angularjs中的模板ui-route來管理狀態(tài)的方法,文中通過示例代碼介紹的很詳細，相信對大家的理解和學(xué)習(xí)具有一定的參考借鑒價值，有需要的朋友可以一起來學(xué)習(xí)學(xué)習(xí)。2016-12-12
這篇文章主要介紹了angular6 填坑之sdk的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
Angular6實現(xiàn)拖拽功能指令drag實例詳解
這篇文章主要為大家介紹了Angular6實現(xiàn)拖拽功能指令drag實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要介紹了AngularJS中下拉框的高級用法,結(jié)合實例形式分析了AngularJS下拉框的遍歷、選擇、綁定、顯示等功能實現(xiàn)方法,需要的朋友可以參考下2017-10-10
Angular中ng-template和ng-container的應(yīng)用小結(jié)
Angular的日常工作中經(jīng)常會使用到ng-template和ng-container，本文對他們做一個總結(jié),本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-06-06
Angular實現(xiàn)的日程表功能【可添加及隱藏顯示內(nèi)容】
這篇文章主要介紹了Angular實現(xiàn)的日程表功能,帶有向日程表中添加內(nèi)容及隱藏顯示內(nèi)容的功能,涉及AngularJS事件響應(yīng)及頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-12-12
深入理解node exports和module.exports區(qū)別
下面小編就為大家?guī)硪黄钊肜斫鈔ode exports和module.exports區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
完美解決UI-Grid表格元素中多個空格顯示為一個空格的問題
下面小編就為大家?guī)硪黄昝澜鉀QUI-Grid表格元素中多個空格顯示為一個空格的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
Renderer2 類是 Angular 提供的一個抽象服務(wù),允許在不直接操作 DOM 的情況下操縱應(yīng)用程序的元素,本文給大家介紹了如何在 Angular 中使用 Renderer2,文中通過代碼示例給大家講解的非常詳細,需要的朋友可以參考下2024-03-03