這次帶給大家angular RouterLinkActive實現路由高亮功能詳解，angular RouterLinkActive實現路由高亮的注意事項有哪些，下面就是實戰案例，一起來看一下。
路由高亮是什麼？有什麼好處？
當你在做一個後台管理系統，左邊是一排路由導航，點擊可以進入不同的頁面，那麼這個路由所在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> login
也可以給routerLinkActive進行設定參數
傳遞exact: true表示路由完全匹配時才高亮，如
複製程式碼 程式碼如下:
你也可以使用isActive檢查目前是否路由處於啟動狀態
<a routerLink="/user/login" routerLinkActive #rla="routerLinkActive">
login {{ rla.isActive ? '激活' : '未激活'}}
</a>如果目前路由處於啟動狀態，則會顯示：login 激活
非啟動狀態
login 未啟動
上述的rla 為routerLinkActive縮寫，它可以隨便定義。
重點來了： 你可以在使用routerLink元素的父元素上使用RouterLinkActive指令
是不是給每個路由分別加上樣式好費事？給它父元素添加上路由高亮指令即可解決問題！
<p routerLinkActive="red" [routerLinkActiveOptions]="{exact: true}">
<a routerLink="/user/login">login</a>
<a routerLink="/user/reset">reset</a>
</p>只要在a標籤的父元素p上加入上routerLinkActive和routerLinkActiveOptions， 當路由是/user/login或/user/reset時其所在dom元素分別被加入上red樣式。這裡要注意的是要新增上routerLinkActiveOptions指定完全匹配，不然會出現url為user時兩個路由均被匹配上新增了red樣式。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是angular+RouterLinkActive實作路由高亮功能詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
