注意:这里有许多不同的答案，大多数在某个时期是有效的。事实上，随着Angular团队对路由器的改变，工作原理也发生了多次变化。最终将成为Angular路由器的Router 3.0版本打破了许多这些解决方案，但它提供了一个非常简单的解决方案。从RC.3开始，首选的解决方案是使用[routerLinkActive]，如下所示。
在Angular应用程序中(当前在2.0.0 beta版中)。当我写这篇文章时，0发布)，你如何确定当前活动的路由是什么?
我正在开发一个使用Bootstrap 4的应用程序，我需要一种方法来标记导航链接/按钮为活动时，他们的相关组件显示在<router-output>标签。
我意识到，当单击其中一个按钮时，我可以自己维护状态，但这不能涵盖进入同一路由的多条路径的情况(比如主导航菜单和主组件中的本地菜单)。
任何建议或链接将不胜感激。谢谢。
当前回答
基于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>
其他回答
Angular 2 RC中的路由器不再定义isRouteActive和generate方法。
urlTree -返回当前的url树。 createUrlTree(命令:any[]， segment?: routessegment) -应用命令数组到当前url树并创建一个新的url树。
尝试后
<li
[class.active]=
"router.urlTree.contains(router.createUrlTree(['/SignIn', this.routeSegment]))">
注意，routessegment: routessegment必须注入到组件的构造函数中。
要标记活动路由，可以使用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中的默认值
在Angular2 RC2中，你可以使用这个简单的实现
<a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a>
这将添加类active的元素与匹配的url，阅读更多关于它在这里
我使用的是angular路由器^3.4.7，我仍然有routerLinkActive指令的问题。
这是不工作，如果你有多个链接与相同的url加上它似乎不刷新所有的时间。
受到@tomaszbak答案的启发，我创建了一个小组件来完成这项工作
对于Angular版本4+，你不需要使用任何复杂的解决方案。你可以简单地使用[routerLinkActive]="'is-active'"。
举个例子，引导4导航链接:
<ul class="navbar-nav mr-auto">
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/home">Home</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/about-us">About Us</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link " routerLink="/contact-us">Contact</a>
</li>
</ul>
