angular路由高亮--長明燈RouterLinkActive

莫莫莫發表於2018-04-28
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標籤將會被加上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>
複製程式碼

只要給a標籤的父元素div新增上routerLinkActive和routerLinkActiveOptions， 當路由是/user/login或/user/reset時其所在dom元素分別被新增上red樣式。 這裡需要注意的是要新增上routerLinkActiveOptions指定完全匹配，不然會出現url為user時兩個路由均被匹配上新增了red樣式。

| 更多API用法更新於 github

相關文章