注意: _这里有很多不同的答案,大多数答案一次或一次都有效。 事实是,当Angular团队更改其Router时,有效的方法已经改变了许多次。最终将 成为 Angular路由器的Router
在Angular应用程序中(我撰写本文时为2.0.0-beta.0版本中的当前版本),如何确定当前活动的路由是什么?
我正在开发一个使用Bootstrap 4的应用程序,并且需要一种在<router- output>标签中显示其关联组件时将导航链接/按钮标记为活动状态的方法。
<router- output>
我意识到当单击其中一个按钮时,我可以自己维护状态,但是这不会涵盖将多条路径放入同一条路线的情况(例如主导航菜单以及主组件中的本地菜单) )。
任何建议或链接将不胜感激。谢谢。
使用新的Angular路由器,您可以[routerLinkActive]="['your-class-name']"向所有链接添加属性:
[routerLinkActive]="['your-class-name']"
<a [routerLink]="['/home']" [routerLinkActive]="['is-active']">Home</a>
或者,如果只需要一个类,则为简化的非数组格式:
<a [routerLink]="['/home']" [routerLinkActive]="'is-active'">Home</a>
如果只需要一个类,甚至可以使用一种更简单的格式:
<a [routerLink]="['/home']" routerLinkActive="is-active">Home</a>