路由高亮是什么？有什么好處？

當你在做一個后臺管理系統，左邊是一排路由導航，點擊可以進入不同的頁面，那么這個路由所在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表示路由完全匹配時才高亮，如

代碼如下:<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>