详解angular路由高亮之RouterLinkActive

网友投稿 399 2023-02-07


详解angular路由高亮之RouterLinkActive

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

当你在做一个后台管理系统,左边是一排路由导航,点击可以进入不同的页面,那么这个路由所在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

linksWithHrefs: QueryList

get isActive: boolean

routerLinkActiveOptions: {...}

set routerLinkActive: 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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:详解Angular5 路由传参的3种方法
下一篇:vue.extend实现alert模态框弹窗组件
相关文章

 发表评论

暂时没有评论,来抢沙发吧~