詳解angular路由高亮之RouterLinkActive

更新時(shí)間：2018年04月28日 10:59:22 作者：莫莫莫

這篇文章主要介紹了詳解angular路由高亮之RouterLinkActive，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

當(dāng)你在做一個(gè)后臺(tái)管理系統(tǒng)，左邊是一排路由導(dǎo)航，點(diǎn)擊可以進(jìn)入不同的頁(yè)面，那么這個(gè)路由所在dom元素會(huì)添加上樣式表示當(dāng)前是位置。

但是一刷新你會(huì)發(fā)現(xiàn)，這個(gè)樣式?jīng)]了...

怎么辦？

采用路由高亮：當(dāng)路由被激活時(shí)允許你添加一個(gè)class在你添加路由的dom元素上，只有url變化時(shí)才會(huì)移除此樣式。

當(dāng)前路由被激活或者當(dāng)前路由處于激活狀態(tài)表示頁(yè)面的url中路由和當(dāng)前dom標(biāo)簽里的路由想匹配。

// 用法概覽
@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>

當(dāng)url是user或者/user/login的時(shí)候，a標(biāo)簽將會(huì)被加上classred。當(dāng)url變化為別的時(shí)，class將會(huì)被移除。

如何添加兩個(gè)class？

<a routerLink="/user/login" routerLinkActive="class1 class2">login</a>

routerLinkActive的兩種寫(xiě)法

<a routerLink="/user/login" routerLinkActive="class1 class2">login</a>
<a routerLink="/user/login" [routerLinkActive]="['class1', 'class2']">login</a>

也可以給routerLinkActive進(jìn)行配置參數(shù)

傳遞exact: true表示路由完全匹配時(shí)才高亮，如

復(fù)制代碼代碼如下:

<a routerLink="/user/login" routerLinkActive="red" [routerLinkActiveOptions]="{exact: true}">login</a>

你還可以使用isActive檢查當(dāng)前是否路由處于激活狀態(tài)

<a routerLink="/user/login" routerLinkActive #rla="routerLinkActive">
 login {{ rla.isActive ? '激活' : '未激活'}}
</a>

如果當(dāng)前路由處于激活狀態(tài)，則會(huì)顯示：login 激活

非激活狀態(tài)

login 未激活

上述的 rla 為routerLinkActive縮寫(xiě)，它可以隨便定義。

重點(diǎn)來(lái)了：你可以在使用routerLink元素的父元素上使用RouterLinkActive指令

是不是給每個(gè)路由都分別添加樣式好費(fèi)事？給它父元素添加上路由高亮指令即可解決問(wèn)題！

<div routerLinkActive="red" [routerLinkActiveOptions]="{exact: true}">
 <a routerLink="/user/login">login</a>
 <a routerLink="/user/reset">reset</a>
</div>

只要給a標(biāo)簽的父元素div添加上routerLinkActive和routerLinkActiveOptions，當(dāng)路由是/user/login或/user/reset時(shí)其所在dom元素分別被添加上red樣式。這里需要注意的是要添加上routerLinkActiveOptions指定完全匹配，不然會(huì)出現(xiàn)url為user時(shí)兩個(gè)路由均被匹配上添加了red樣式。

更多API用法更新于 github

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: