angular2路由之routerLinkActive指令【推荐】

By admin in 计算机教程 on 2019年7月28日

angular2的routerLinkActive指令在路由激活时添加样式class

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

.red{
 color: red;
}

<a routerLink="/user/login" routerLinkActive="red">login</a>

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

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

但是一刷新你会发现,这个样式没了…

如何添加两个class   

怎么办?

<a routerLink="/user/login" routerLinkActive="class1 class2">login</a>

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

routerLinkActive的两种写法   

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

<a routerLink="/user/login" routerLinkActive="class1 class2">login</a>
<a routerLink="/user/login" [routerLinkActive]="['class1', 'class2']">login</a>
// 用法概览
@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
}

也可以给routerLinkActive进行配置参数

示例

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

.red{
  color: red;
}


<a routerLink="/user/login" routerLinkActive="red">login</a>
<a routerLink="/user/login" routerLinkActive="red" [routerLinkActiveOptions]="{exact: true}">login</a>

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

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

如何添加两个class?

<a routerLink="/user/login" routerLinkActive #rla="routerLinkActive">
 login {{ rla.isActive ? '激活' : '未激活'}}
</a>
<a routerLink="/user/login" routerLinkActive="class1 class2">login</a>

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

routerLinkActive的两种写法

非激活状态

<a routerLink="/user/login" routerLinkActive="class1 class2">login</a>
<a routerLink="/user/login" [routerLinkActive]="['class1', 'class2']">login</a>

login 未激活

也可以给routerLinkActive进行配置参数

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门金沙30064在线网站 版权所有