路由高亮是什么?有什么好处?
当你在做一个后台管理系统,左边是一排路由导航,点击可以进入不同的页面,那么这个路由所在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
}
示例
当url是user或者/user/login的时候,a标签将会被加上classred。当url变化为别的时,class将会被移除。
如何添加两个class?
routerLinkActive的两种写法
也可以给routerLinkActive
进行配置参数
传递exact: true表示路由完全匹配时才高亮,如
代码如下:
你还可以使用isActive检查当前是否路由处于激活状态
如果当前路由处于激活状态,则会显示:login 激活
非激活状态
login 未激活
上述的 rla 为routerLinkActive缩写,它可以随便定义。