注意:这里有许多不同的答案，大多数在某个时期是有效的。事实上，随着Angular团队对路由器的改变，工作原理也发生了多次变化。最终将成为Angular路由器的Router 3.0版本打破了许多这些解决方案，但它提供了一个非常简单的解决方案。从RC.3开始，首选的解决方案是使用[routerLinkActive]，如下所示。
在Angular应用程序中(当前在2.0.0 beta版中)。当我写这篇文章时，0发布)，你如何确定当前活动的路由是什么?
我正在开发一个使用Bootstrap 4的应用程序，我需要一种方法来标记导航链接/按钮为活动时，他们的相关组件显示在<router-output>标签。
我意识到，当单击其中一个按钮时，我可以自己维护状态，但这不能涵盖进入同一路由的多条路径的情况(比如主导航菜单和主组件中的本地菜单)。
任何建议或链接将不胜感激。谢谢。
当前回答
Angular2 RC 4的解决方案:
import {containsTree} from '@angular/router/src/url_tree';
import {Router} from '@angular/router';
export function isRouteActive(router: Router, route: string) {
const currentUrlTree = router.parseUrl(router.url);
const routeUrlTree = router.createUrlTree([route]);
return containsTree(currentUrlTree, routeUrlTree, true);
}
其他回答
正如已接受答案的一条注释中所提到的，routerLinkActive指令也可以应用于实际<a>标记的容器。
例如，在Twitter Bootstrap选项卡中，active类应该应用于包含链接的<li>标签:
<ul class="nav nav-tabs">
<li role="presentation" routerLinkActive="active">
<a routerLink="./location">Location</a>
</li>
<li role="presentation" routerLinkActive="active">
<a routerLink="./execution">Execution</a>
</li>
</ul>
非常简洁!我假设该指令检查标记的内容，并使用routerLink指令寻找<a>标记。
在Angular2 RC2中，你可以使用这个简单的实现
<a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a>
这将添加类active的元素与匹配的url，阅读更多关于它在这里
你可以通过将Location对象注入控制器并检查path()来检查当前路由，如下所示:
class MyController {
constructor(private location:Location) {}
... location.path(); ...
}
你必须确保首先导入它:
import {Location} from "angular2/router";
然后，您可以使用正则表达式与返回的路径进行匹配，以查看哪个路由是活动的。注意，Location类返回一个规范化的路径，而不管您使用的是哪个LocationStrategy。所以即使你在使用hashlocationstrategy，返回的路径仍然是/foo/bar的形式，而不是#/foo/bar
在2020年，如果你想在没有[routerLink]的元素上设置active类，你可以简单地做:
<a
(click)="bookmarks()"
[class.active]="router.isActive('/string/path/'+you+'/need', false)" // <== you need this one. second argument 'false' - exact: true/false
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>
bookmarks
</a>
要标记活动路由，可以使用routerLinkActive
<a [routerLink]="/user" routerLinkActive="some class list">User</a>
这也适用于其他元素，如
<div routerLinkActive="some class list">
<a [routerLink]="/user">User</a>
</div>
如果部分匹配也应标记使用
routerLinkActive="some class list" [routerLinkActiveOptions]="{ exact: false }"
据我所知，exact: false将是RC.4中的默认值
