注意:这里有许多不同的答案,大多数在某个时期是有效的。事实上,随着Angular团队对路由器的改变,工作原理也发生了多次变化。最终将成为Angular路由器的Router 3.0版本打破了许多这些解决方案,但它提供了一个非常简单的解决方案。从RC.3开始,首选的解决方案是使用[routerLinkActive],如下所示。

在Angular应用程序中(当前在2.0.0 beta版中)。当我写这篇文章时,0发布),你如何确定当前活动的路由是什么?

我正在开发一个使用Bootstrap 4的应用程序,我需要一种方法来标记导航链接/按钮为活动时,他们的相关组件显示在<router-output>标签。

我意识到,当单击其中一个按钮时,我可以自己维护状态,但这不能涵盖进入同一路由的多条路径的情况(比如主导航菜单和主组件中的本地菜单)。

任何建议或链接将不胜感激。谢谢。


当前回答

下面是在Angular 2.0.0-rc版本中添加活动路由样式的完整示例。1,它考虑了空根路径(例如path: '/')

app.component.ts ->路由

import { Component, OnInit } from '@angular/core';
import { Routes, Router, ROUTER_DIRECTIVES } from '@angular/router';
import { LoginPage, AddCandidatePage } from './export';
import {UserService} from './SERVICES/user.service';

@Component({
  moduleId: 'app/',
  selector: 'my-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  providers: [UserService],
  directives: [ROUTER_DIRECTIVES]
})

@Routes([
  { path: '/', component: AddCandidatePage },
  { path: 'Login', component: LoginPage }
])
export class AppComponent  { //implements OnInit

  constructor(private router: Router){}

  routeIsActive(routePath: string) {
     let currentRoute = this.router.urlTree.firstChild(this.router.urlTree.root);
     // e.g. 'Login' or null if route is '/'
     let segment = currentRoute == null ? '/' : currentRoute.segment;
     return  segment == routePath;
  }
}

app.component.html

<ul>
  <li [class.active]="routeIsActive('Login')"><a [routerLink]="['Login']" >Login</a></li>
  <li [class.active]="routeIsActive('/')"><a [routerLink]="['/']" >AddCandidate</a></li>
</ul>
<route-outlet></router-outlet>

其他回答

如何确定当前活动的路由是什么?

更新:根据Angular2.4.x更新

constructor(route: ActivatedRoute) {
   route.snapshot.params; // active route's params

   route.snapshot.data; // active route's resolved data

   route.snapshot.component; // active route's component

   route.snapshot.queryParams // The query parameters shared by all the routes
}

查看更多

你可以通过将Location对象注入控制器并检查path()来检查当前路由,如下所示:

class MyController {
    constructor(private location:Location) {}

    ...  location.path(); ...
}

你必须确保首先导入它:

import {Location} from "angular2/router";

然后,您可以使用正则表达式与返回的路径进行匹配,以查看哪个路由是活动的。注意,Location类返回一个规范化的路径,而不管您使用的是哪个LocationStrategy。所以即使你在使用hashlocationstrategy,返回的路径仍然是/foo/bar的形式,而不是#/foo/bar

我使用的是angular路由器^3.4.7,我仍然有routerLinkActive指令的问题。

这是不工作,如果你有多个链接与相同的url加上它似乎不刷新所有的时间。

受到@tomaszbak答案的启发,我创建了一个小组件来完成这项工作

要标记活动路由,可以使用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中的默认值

在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>