注意:这里有许多不同的答案，大多数在某个时期是有效的。事实上，随着Angular团队对路由器的改变，工作原理也发生了多次变化。最终将成为Angular路由器的Router 3.0版本打破了许多这些解决方案，但它提供了一个非常简单的解决方案。从RC.3开始，首选的解决方案是使用[routerLinkActive]，如下所示。
在Angular应用程序中(当前在2.0.0 beta版中)。当我写这篇文章时，0发布)，你如何确定当前活动的路由是什么?
我正在开发一个使用Bootstrap 4的应用程序，我需要一种方法来标记导航链接/按钮为活动时，他们的相关组件显示在<router-output>标签。
我意识到，当单击其中一个按钮时，我可以自己维护状态，但这不能涵盖进入同一路由的多条路径的情况(比如主导航菜单和主组件中的本地菜单)。
任何建议或链接将不胜感激。谢谢。
当前回答
我只是想添加一个不使用任何typescript的例子:
<input type="hidden" [routerLink]="'home'" routerLinkActive #home="routerLinkActive" />
<section *ngIf="home.isActive"></section>
routerLinkActive变量被绑定到一个模板变量上，然后根据需要重新使用。不幸的是，唯一需要注意的是，您不能将这些都放在<section>元素上，因为#home需要在解析器命中<section>之前解析。
其他回答
另一个解决方案。在Angular Router V3 Alpha中要简单得多。注入路由器
import {Router} from "@angular/router";
export class AppComponent{
constructor(private router : Router){}
routeIsActive(routePath: string) {
return this.router.url == routePath;
}
}
使用
<div *ngIf="routeIsActive('/')"> My content </div>
下面是使用RouteData根据当前路由样式化菜单栏项的方法:
routecconfig包含了tab(当前路由)的数据:
@RouteConfig([
{
path: '/home', name: 'Home', component: HomeComponent,
data: {activeTab: 'home'}, useAsDefault: true
}, {
path: '/jobs', name: 'Jobs', data: {activeTab: 'jobs'},
component: JobsComponent
}
])
一份布局:
<li role="presentation" [ngClass]="{active: isActive('home')}">
<a [routerLink]="['Home']">Home</a>
</li>
<li role="presentation" [ngClass]="{active: isActive('jobs')}">
<a [routerLink]="['Jobs']">Jobs</a>
</li>
类:
export class MainMenuComponent {
router: Router;
constructor(data: Router) {
this.router = data;
}
isActive(tab): boolean {
if (this.router.currentInstruction && this.router.currentInstruction.component.routeData) {
return tab == this.router.currentInstruction.component.routeData.data['activeTab'];
}
return false;
}
}
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>
在Angular2 RC2中，你可以使用这个简单的实现
<a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a>
这将添加类active的元素与匹配的url，阅读更多关于它在这里
以下是迄今为止发布的所有Angular 2 RC版本对这个问题的答案:
RC4和RC3:
将类应用到link或link的祖先:
<li routerLinkActive="active"><a [routerLink]="['/home']">Home</a></li>
/home应该是URL，而不是路由的名称，因为name属性在路由器v3不再存在于路由对象中。
更多关于routerLinkActive指令的信息。
基于当前路由将class应用到任何div:
将路由器注入组件的构造函数。 用户路由器。Url进行比较。
e.g
<nav [class.transparent]="router.url==('/home')">
</nav>
RC2和RC1:
使用路由器组合。isRouteActive和class.*。例如，基于Home Route应用活动类。
Name和url都可以传递到router.generate中。
<li [class.active]="router.isRouteActive(router.generate(['Home']))">
<a [routerLink]="['Home']" >Home</a>
</li>
