详解angular路由高亮之RouterLinkActive
(编辑：jimmy 日期: 2024/11/9 浏览：3 次 )
路由高亮是什么？有什么好处？
当你在做一个后台管理系统，左边是一排路由导航，点击可以进入不同的页面，那么这个路由所在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 "htmlcode">
<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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：vue弹窗组件使用方法