angular路由高亮實現步驟詳解

這次帶給大家angular路由高亮之實現步驟詳解，angular路由高亮實現的注意事項有哪些，下面就是實戰案例，一起來看一下。

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

當你在做一個後台管理系統，左邊是一排路由導航，點擊可以進入不同的頁面，那麼這個路由所在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標籤將會被加上cla​​ssred。當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表示路由完全匹配時才高亮，如

複製程式碼 程式碼如下:

0acfc946cc900ff523f3287945658770login5db79b134e9f6b82c0b36e0489ee08ed

你也可以使用isActive檢查目前是否路由處於啟動狀態

<a routerLink="/user/login" routerLinkActive #rla="routerLinkActive">
 login {{ rla.isActive ? &#39;激活&#39; : &#39;未激活&#39;}}
</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樣式。

更多API用法更新於 github

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

建議閱讀：

Angular5路由傳值方法總結

#JS做出折疊展開動畫（附程式碼）

以上是angular路由高亮實現步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！