注意:这里有许多不同的答案，大多数在某个时期是有效的。事实上，随着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在下面的评论中。)
其他回答
我想在Angular2中使用Twitter Bootstrap风格的导航，但是很难将active类应用到所选链接的父元素上。发现@alex-correia-santos的解决方案完美无缺!
包含选项卡的组件必须导入路由器，并在其构造函数中定义路由器，然后才能进行必要的调用。
这是我的实现的简化版本……
import {Component} from 'angular2/core';
import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HomeComponent} from './home.component';
import {LoginComponent} from './login.component';
import {FeedComponent} from './feed.component';
@Component({
selector: 'my-app',
template: `
<ul class="nav nav-tabs">
<li [class.active]="_r.isRouteActive(_r.generate(['Home']))">
<a [routerLink]="['Home']">Home</a>
</li>
<li [class.active]="_r.isRouteActive(_r.generate(['Login']))">
<a [routerLink]="['Login']">Sign In</a>
</li>
<li [class.active]="_r.isRouteActive(_r.generate(['Feed']))">
<a [routerLink]="['Feed']">Feed</a>
</li>
</ul>`,
styleUrls: ['app/app.component.css'],
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{ path:'/', component:HomeComponent, name:'Home', useAsDefault:true },
{ path:'/login', component:LoginComponent, name:'Login' },
{ path:'/feed', component:FeedComponent, name:'Feed' }
])
export class AppComponent {
title = 'My App';
constructor( private _r:Router ){}
}
在简单的情况下，当有一个链接并且你想应用一些类时，使用routerLinkActive是很好的。但在更复杂的情况下，你可能没有routerLink，或者你需要更多的东西，你可以创建并使用管道:
@Pipe({
name: "isRouteActive",
pure: false
})
export class IsRouteActivePipe implements PipeTransform {
constructor(private router: Router,
private activatedRoute: ActivatedRoute) {
}
transform(route: any[], options?: { queryParams?: any[], fragment?: any, exact?: boolean }) {
if (!options) options = {};
if (options.exact === undefined) options.exact = true;
const currentUrlTree = this.router.parseUrl(this.router.url);
const urlTree = this.router.createUrlTree(route, {
relativeTo: this.activatedRoute,
queryParams: options.queryParams,
fragment: options.fragment
});
return containsTree(currentUrlTree, urlTree, options.exact);
}
}
然后:
<div *ngIf="['/some-route'] | isRouteActive">...</div>
不要忘记在管道依赖项中包含管道;)
从Angular 8开始，它可以工作:
<li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
<a [routerLink]="['/']">Home</a>
</li>
{exact: true}确保它与url匹配。
我只是想添加一个不使用任何typescript的例子:
<input type="hidden" [routerLink]="'home'" routerLinkActive #home="routerLinkActive" />
<section *ngIf="home.isActive"></section>
routerLinkActive变量被绑定到一个模板变量上，然后根据需要重新使用。不幸的是，唯一需要注意的是，您不能将这些都放在<section>元素上，因为#home需要在解析器命中<section>之前解析。
现在我正在使用rc。4与bootstrap 4和这个对我来说是完美的:
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:
true}">
<a class="nav-link" [routerLink]="['']">Home</a>
</li>
这将适用于url: /home
