angular2路由之routerLinkActive指令【推荐】
程序员文章站
2022-04-09 12:43:10
angular2的routerlinkactive指令在路由激活时添加样式class
.red{
color: red;
}
angular2的routerlinkactive指令在路由激活时添加样式class
.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 ? '激活' : '未激活'}}
</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指令，希望对大家有所帮助
下一篇： Nodejs监听日志文件的变化的过程解析