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

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

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

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

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


当前回答

现在我正在使用rc。4与bootstrap 4和这个对我来说是完美的:

 <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:
true}">
    <a class="nav-link" [routerLink]="['']">Home</a>
</li>

这将适用于url: /home

其他回答

对于angular 5用户来说,简单的解决方案是将routerLinkActive添加到列表项中。

routerLinkActive指令通过routerLink指令与路由相关联。

它接受一个类数组作为输入,如果它的路由当前是活动的,它将把这些类添加到它所附加的元素中,如下所示:

<li class="nav-item"
    [routerLinkActive]="['active']">
  <a class="nav-link"
     [routerLink]="['home']">Home
  </a>
</li>

如果我们当前正在查看主路由,上述操作将为锚标记添加一类active。

首先在.ts中导入RouterLinkActive

import {RouterLinkActive} from '@angular/router';

现在在HTML中使用RouterLinkActive

<span class="" routerLink ="/some_path" routerLinkActive="class_Name">Value</span></a>

为类“class_Name”提供一些css,因为当这个链接被激活/单击时,你会在span检查时发现这个类。

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

更新:根据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
}

查看更多

让我们说你想添加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>

基于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>