注意： 这里有许多不同的答案，而且大多数都曾经有效。事实是，随着 Angular 团队更改其路由器，有效的方法发生了多次变化。最终将成为Angular 中的路由器的 Router 3.0 版本打破了许多这些解决方案，但提供了一个非常简单的解决方案。从 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指令。（我主要是通过反复试验来解决这个问题的。）
更新：routerLinkActive现在可以在此处找到该指令的更好文档。（感谢@Victor Hugo Arango A. 在下面的评论中。）
我已经在另一个问题中回答了这个问题，但我相信它也可能与这个问题有关。这是原始答案的链接： Angular 2：如何使用参数确定活动路线？
我一直在尝试设置活动类，而不必确切知道当前位置是什么（使用路线名称）。到目前为止，我得到的最好的解决方案是使用类中可用的函数isRouteActiveRouter。
router.isRouteActive(instruction): Boolean接受一个参数，它是一个路由Instruction对象并返回true或者false该指令是否对当前路由成立。您可以Instruction使用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>
到目前为止，这是我对这个问题的首选解决方案，它可能对您也有帮助。
对基于https://github.com/angular/angular/pull/6407#issuecomment-190179875 的@alex-correia-santos 答案的小改进
import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
// ...
export class App {
constructor(private router: Router) {
}
// ...
isActive(instruction: any[]): boolean {
return this.router.isRouteActive(this.router.generate(instruction));
}
}
并像这样使用它：
<ul class="nav navbar-nav">
<li [class.active]="isActive(['Home'])">
<a [routerLink]="['Home']">Home</a>
</li>
<li [class.active]="isActive(['About'])">
<a [routerLink]="['About']">About</a>
</li>
</ul>
我解决了在此链接中遇到的一个问题，我发现您的问题有一个简单的解决方案。您可以router-link-active在您的样式中使用。
@Component({
styles: [`.router-link-active { background-color: red; }`]
})
export class NavComponent {
}
您可以通过将Location对象注入控制器并检查来检查当前路线path()，如下所示：
class MyController {
constructor(private location:Location) {}
... location.path(); ...
}
您必须确保先导入它：
import {Location} from "angular2/router";
然后，您可以使用正则表达式匹配返回的路径以查看哪个路由处于活动状态。请注意，Location无论LocationStrategy您使用的是哪种路径，该类都会返回规范化的路径。因此，即使您使用的HashLocationStragegy是返回的路径，它的形式仍然/foo/bar 不是 #/foo/bar