微客导航 » 文章资讯 » 详解angular路由高亮之RouterLinkActive

详解angular路由高亮之RouterLinkActive

2023-09-13 13:54:05 184

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

当你在做一个后台管理系统，左边是一排路由导航，点击可以进入不同的页面，那么这个路由所在dom元素会添加上样式表示当前是位置。

但是一刷新你会发现，这个样式没了...

怎么办？

采用路由高亮：当路由被激活时允许你添加一个class在你添加路由的dom元素上，只有url变化时才会移除此样式。

当前路由被激活或者当前路由处于激活状态表示页面的url中路由和当前dom标签里的路由想匹配。

//用法概览
@Directive({
selector:'[routerLinkActive]',
exportAs:'routerLinkActive'
})
classRouterLinkActiveimplementsOnChanges,OnDestroy,AfterContentInit{
constructor(router:Router,element:ElementRef,renderer:Renderer2,cdr:ChangeDetectorRef)
links:QueryList
linksWithHrefs:QueryList
getisActive:boolean
routerLinkActiveOptions:{...}
setrouterLinkActive:string[]|string
ngAfterContentInit():void
ngOnChanges(changes:SimpleChanges):void
ngOnDestroy():void
}

示例

.red{
color:red;
}

login

当url是user或者/user/login的时候，a标签将会被加上classred。当url变化为别的时，class将会被移除。

如何添加两个class？

login

routerLinkActive的两种写法

login
login

也可以给routerLinkActive进行配置参数

传递exact:true表示路由完全匹配时才高亮，如

login

你还可以使用isActive检查当前是否路由处于激活状态


login{{rla.isActive?'激活':'未激活'}}

如果当前路由处于激活状态，则会显示：login激活

非激活状态

login未激活

上述的rla为routerLinkActive缩写，它可以随便定义。

重点来了：你可以在使用routerLink元素的父元素上使用RouterLinkActive指令

是不是给每个路由都分别添加样式好费事？给它父元素添加上路由高亮指令即可解决问题！


login
reset

只要给a标签的父元素div添加上routerLinkActive和routerLinkActiveOptions，当路由是/user/login或/user/reset时其所在dom元素分别被添加上red样式。这里需要注意的是要添加上routerLinkActiveOptions指定完全匹配，不然会出现url为user时两个路由均被匹配上添加了red样式。

更多API用法更新于github

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

详解angular路由高亮之RouterLinkActive

热门推荐

随机推荐