在Angular中，如何确定活动路由？

Question

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

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

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

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

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

Answer 1

我已经在另一个问题中回答了这个问题，但我相信它可能也与这个问题有关。这里有一个原始答案的链接：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>

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

Answer 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.在下面的评论中。）