注意:这里有很多不同的答案,而且大多数在某个时候都是有效的。事实上,当Angular团队改变其路由器时,工作的方式已经改变了很多次。Router3.0版本将最终成为Angular中的路由器,它打破了许多这些解决方案,但提供了一个非常简单的解决方案。从RC.3开始,首选解决方案是使用[routerLinkActive]
,如本答案所示。
在Angular应用程序中(我写这篇文章的时候是2.0.0-Beta.0版本中的最新版本),如何确定当前活动的路由是什么?
我正在开发一个使用Bootstrap 4的应用程序,我需要一种方法,当导航链接/按钮的相关组件显示在
标记中时,将其标记为活动的。
我意识到,当点击其中一个按钮时,我可以自己保持状态,但这并不包括在同一路由中有多个路径的情况(例如主导航菜单以及主组件中的本地菜单)。
如有任何建议或联系,将不胜感激。多谢了。
使用新的Angular路由器,您可以向所有链接添加[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>
有关更多信息,请参阅文档不完整的routerlinkactive
指令。(我主要是通过反复试验得出这个结论的。)
更新:关于routerlinkactive
指令的更好的文档现在可以在这里找到。(感谢@Victor Hugo Arango A.在下面的评论中。)
我已经在另一个问题中回答了这个问题,但我相信它可能也与这个问题有关。这里有一个原始答案的链接:Angular 2:如何用参数确定活动路由?
我一直在尝试设置active类,而不必确切知道当前位置(使用路由名称)。到目前为止,最好的解决方案是使用router
类中可用的isRouteActive函数。
Router.IsRouteActive(指令):boolean
接受一个参数,该参数是route指令
对象,并返回true
或false
,无论该指令对当前路由是否为true。您可以使用router
的generate(linkparams:Array)生成路由指令
。LinkParams的格式与传入routerLink指令的值完全相同(例如Router.IsRouteActive(Router.Generate(['/user',{user:user.id}]))
)。
这就是RouteConfig的样子(我对它做了一点调整,以显示参数的用法):
@RouteConfig([
{ path: '/', component: HomePage, name: 'Home' },
{ path: '/signin', component: SignInPage, name: 'SignIn' },
{ path: '/profile/:username/feed', component: FeedPage, name: 'ProfileFeed' },
])
而视图将如下所示:
<li [class.active]="router.isRouteActive(router.generate(['/Home']))">
<a [routerLink]="['/Home']">Home</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/SignIn']))">
<a [routerLink]="['/SignIn']">Sign In</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/ProfileFeed', { username: user.username }]))">
<a [routerLink]="['/ProfileFeed', { username: user.username }]">Feed</a>
</li>
到目前为止,这是我对这个问题的首选解决方案,它可能对你也有帮助。