注意：这里有许多不同的答案，大多数都曾经有效过。事实是，随着Angular团队更改其路由器，有效的方法已经更改了很多次。路由器3.0版本最终将成为Angular中的路由器，它破坏了许多这些解决方案，但提供了一个非常简单的解决方案。从 RC.3 开始，首选解决方案是使用 [routerLinkActive]，如本答案所示。
在Angular应用程序中（在我写这篇文章时，当前在2.0.0-beta.0版本中），您如何确定当前活动的路由是什么？
我正在开发一个使用 Bootstrap 4 的应用，我需要一种方法，当导航链接/按钮的关联组件显示在标记中时，它将导航链接/按钮标记为活动状态。<router-output>
我意识到，当单击其中一个按钮时，我可以自己保持状态，但这并不能涵盖将多个路径连接到同一路线的情况（例如主导航菜单以及主组件中的本地菜单）。
任何建议或链接将不胜感激。谢谢。
使用新的 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 指令。（我主要是通过试错法来解决这个问题的。
更新：现在可以在此处找到有关该指令的更好文档。（感谢@Victor雨果·阿兰戈·A.在下面的评论中。routerLinkActive
我已经在另一个问题中回答了这个问题，但我相信它可能也与这个问题有关。以下是原始答案的链接：Angular 2：如何使用参数确定活动路由？
我一直在尝试设置活动类，而不必确切知道当前位置是什么（使用路由名称）。到目前为止，我得到的最佳解决方案是使用类中可用的函数isRouteActive。Router
router.isRouteActive(instruction): Boolean采用一个参数，该参数是路由对象并返回或该指令是否对当前路由成立。您可以使用 的 generate（linkParams： Array） 生成路由。LinkParams 遵循与传递到路由器链接指令中的值完全相同的格式（例如 ).InstructiontruefalseInstructionRouterrouter.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>
到目前为止，这是我解决问题的首选解决方案，也可能对您有所帮助。
