建站
咨詢
售后
建站咨詢
新聞中心
路由高亮是什么？有什么好處？
創(chuàng)新互聯(lián)公司是一家做網(wǎng)站、成都網(wǎng)站制作，提供網(wǎng)頁設(shè)計，網(wǎng)站設(shè)計，網(wǎng)站制作，建網(wǎng)站，按需網(wǎng)站開發(fā)，網(wǎng)站開發(fā)公司，自2013年創(chuàng)立以來是互聯(lián)行業(yè)建設(shè)者，服務(wù)者。以提升客戶品牌價值為核心業(yè)務(wù)，全程參與項目的網(wǎng)站策劃設(shè)計制作，前端開發(fā)，后臺程序制作以及后期項目運營并提出專業(yè)建議和思路。
當(dāng)你在做一個后臺管理系統(tǒng)，左邊是一排路由導(dǎo)航，點擊可以進(jìn)入不同的頁面，那么這個路由所在dom元素會添加上樣式表示當(dāng)前是位置。
但是一刷新你會發(fā)現(xiàn)，這個樣式?jīng)]了...
怎么辦？
采用路由高亮：當(dāng)路由被激活時允許你添加一個class在你添加路由的dom元素上，只有url變化時才會移除此樣式。
當(dāng)前路由被激活或者當(dāng)前路由處于激活狀態(tài)表示頁面的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
linksWithHrefs: QueryList
get isActive: boolean
routerLinkActiveOptions: {...}
set routerLinkActive: string[] | string
ngAfterContentInit(): void
ngOnChanges(changes: SimpleChanges): void
ngOnDestroy(): void
}
示例
.red{
color: red;
}當(dāng)url是user或者/user/login的時候，a標(biāo)簽將會被加上classred。當(dāng)url變化為別的時，class將會被移除。
如何添加兩個class？
routerLinkActive的兩種寫法
也可以給routerLinkActive進(jìn)行配置參數(shù)
傳遞exact: true表示路由完全匹配時才高亮，如
你還可以使用isActive檢查當(dāng)前是否路由處于激活狀態(tài)
如果當(dāng)前路由處于激活狀態(tài)，則會顯示：login 激活
非激活狀態(tài)
login 未激活
上述的 rla 為routerLinkActive縮寫，它可以隨便定義。
重點來了： 你可以在使用routerLink元素的父元素上使用RouterLinkActive指令
是不是給每個路由都分別添加樣式好費事？給它父元素添加上路由高亮指令即可解決問題！
只要給a標(biāo)簽的父元素div添加上routerLinkActive和routerLinkActiveOptions， 當(dāng)路由是/user/login或/user/reset時其所在dom元素分別被添加上red樣式。 這里需要注意的是要添加上routerLinkActiveOptions指定完全匹配，不然會出現(xiàn)url為user時兩個路由均被匹配上添加了red樣式。
更多API用法更新于 github
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
當(dāng)前標(biāo)題：詳解angular路由高亮之RouterLinkActive
網(wǎng)站路徑：http://www.dlmjj.cn/article/psgedd.html
