注意:这里有许多不同的答案，大多数在某个时期是有效的。事实上，随着Angular团队对路由器的改变，工作原理也发生了多次变化。最终将成为Angular路由器的Router 3.0版本打破了许多这些解决方案，但它提供了一个非常简单的解决方案。从RC.3开始，首选的解决方案是使用[routerLinkActive]，如下所示。
在Angular应用程序中(当前在2.0.0 beta版中)。当我写这篇文章时，0发布)，你如何确定当前活动的路由是什么?
我正在开发一个使用Bootstrap 4的应用程序，我需要一种方法来标记导航链接/按钮为活动时，他们的相关组件显示在<router-output>标签。
我意识到，当单击其中一个按钮时，我可以自己维护状态，但这不能涵盖进入同一路由的多条路径的情况(比如主导航菜单和主组件中的本地菜单)。
任何建议或链接将不胜感激。谢谢。
当前回答
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必须注入到组件的构造函数中。
其他回答
我只是想添加一个不使用任何typescript的例子:
<input type="hidden" [routerLink]="'home'" routerLinkActive #home="routerLinkActive" />
<section *ngIf="home.isActive"></section>
routerLinkActive变量被绑定到一个模板变量上，然后根据需要重新使用。不幸的是，唯一需要注意的是，您不能将这些都放在<section>元素上，因为#home需要在解析器命中<section>之前解析。
让我们说你想添加CSS到我的active state/标签。使用routerLinkActive激活路由链路。
注意:'active'是我的类名
<style>
.active{
color:blue;
}
</style>
<a routerLink="/home" [routerLinkActive]="['active']">Home</a>
<a routerLink="/about" [routerLinkActive]="['active']">About</a>
<a routerLink="/contact" [routerLinkActive]="['active']">Contact</a>
在新的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在下面的评论中。)
这对我的主动/非主动路线有帮助:
<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive" [ngClass]="rla.isActive ? 'classIfActive' : 'classIfNotActive'">
</a>
Ref
Router类的实例实际上是一个可观察对象，它每次改变时都会返回当前路径。我是这样做的:
export class AppComponent implements OnInit {
currentUrl : string;
constructor(private _router : Router){
this.currentUrl = ''
}
ngOnInit() {
this._router.subscribe(
currentUrl => this.currentUrl = currentUrl,
error => console.log(error)
);
}
isCurrentRoute(route : string) : boolean {
return this.currentUrl === route;
}
}
然后在我的HTML中
<a [routerLink]="['Contact']" class="item" [class.active]="isCurrentRoute('contact')">Contact</a>
