溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
路由高亮是什么？有什么好處？
當你在做一個后臺管理系統，左邊是一排路由導航，點擊可以進入不同的頁面，那么這個路由所在dom元素會添加上樣式表示當前是位置。
但是一刷新你會發現，這個樣式沒了...
怎么辦？
采用路由高亮：當路由被激活時允許你添加一個class在你添加路由的dom元素上，只有url變化時才會移除此樣式。
當前路由被激活或者當前路由處于激活狀態表示頁面的url中路由和當前dom標簽里的路由想匹配。
// 用法概覽
@Directive({
selector: '[routerLinkActive]',
exportAs: 'routerLinkActive'
})
class RouterLinkActive implements OnChanges, OnDestroy, AfterContentInit {
constructor(router: Router, element: ElementRef, renderer: Renderer2, cdr: ChangeDetectorRef)
links: QueryList<RouterLink>
linksWithHrefs: QueryList<RouterLinkWithHref>
get isActive: boolean
routerLinkActiveOptions: {...}
set routerLinkActive: string[] | string
ngAfterContentInit(): void
ngOnChanges(changes: SimpleChanges): void
ngOnDestroy(): void
}
示例
.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表示路由完全匹配時才高亮，如
你還可以使用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樣式。
更多API用法更新于 github
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
