提问者:小点点

在Angular中,如何确定活动路由?


注意:这里有很多不同的答案,而且大多数在某个时候都是有效的。事实上,当Angular团队改变其路由器时,工作的方式已经改变了很多次。Router3.0版本将最终成为Angular中的路由器,它打破了许多这些解决方案,但提供了一个非常简单的解决方案。从RC.3开始,首选解决方案是使用[routerLinkActive],如本答案所示。

在Angular应用程序中(我写这篇文章的时候是2.0.0-Beta.0版本中的最新版本),如何确定当前活动的路由是什么?

我正在开发一个使用Bootstrap 4的应用程序,我需要一种方法,当导航链接/按钮的相关组件显示在标记中时,将其标记为活动的。

我意识到,当点击其中一个按钮时,我可以自己保持状态,但这并不包括在同一路由中有多个路径的情况(例如主导航菜单以及主组件中的本地菜单)。

如有任何建议或联系,将不胜感激。多谢了。


共2个答案

匿名用户

使用新的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指令对象,并返回truefalse,无论该指令对当前路由是否为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>

到目前为止,这是我对这个问题的首选解决方案,它可能对你也有帮助。