推荐设备MORE

凡科抠图 室内手机照片柔美的

凡科抠图 室内手机照片柔美的

行业知识

微信小程序开发公司_angular2路由之routerLinkActive指

日期:2021-01-08
我要分享
angular2路由之routerLinkActive指令【推荐】     作者:(聂伟)   这篇文章主要介绍了angular2路由之routerLinkActive指令的相关资料,需要的朋友可以参考下

当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 '激活' : '未激活'}}
 /a 

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

非激活状态

login 未激活

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

重点来了: 使用routerLink元素的父元素上使用RouterLinkActive指令

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

 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样式。

总结

以上所述是小编给大家介绍的angular2路由之routerLinkActive指令,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!