下面是在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>

以下是迄今为止发布的所有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>

另一个解决方案。在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>

一种程序化的方式是在组件本身中完成。我在这个问题上挣扎了三周，但最终放弃了angular文档，转而阅读了让routerlinkactive工作的实际代码，这是我能找到的最好的文档了。

    import {
  Component,AfterContentInit,OnDestroy, ViewChild,OnInit, ViewChildren, AfterViewInit, ElementRef, Renderer2, QueryList,NgZone,ApplicationRef
}
  from '@angular/core';
  import { Location } from '@angular/common';

import { Subscription } from 'rxjs';
import {
  ActivatedRoute,ResolveStart,Event, Router,RouterEvent, NavigationEnd, UrlSegment
} from '@angular/router';
import { Observable } from "rxjs";
import * as $ from 'jquery';
import { pairwise, map } from 'rxjs/operators';
import { filter } from 'rxjs/operators';
import {PageHandleService} from '../pageHandling.service'
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})




export class HeaderComponent implements AfterContentInit,AfterViewInit,OnInit,OnDestroy{

    public previousUrl: any;
    private subscription: Subscription;


      @ViewChild("superclass", { static: false } as any) superclass: ElementRef;
      @ViewChildren("megaclass") megaclass: QueryList<ElementRef>;


  constructor( private element: ElementRef, private renderer: Renderer2, private router: Router, private activatedRoute: ActivatedRoute, private location: Location, private pageHandleService: PageHandleService){
    this.subscription = router.events.subscribe((s: Event) => {
      if (s instanceof NavigationEnd) {
        this.update();
      }
    });


  }


  ngOnInit(){

  }


  ngAfterViewInit() {
  }

  ngAfterContentInit(){
  }



private update(): void {
  if (!this.router.navigated || !this.superclass) return;
      Promise.resolve().then(() => {
        this.previousUrl = this.router.url

        this.megaclass.toArray().forEach( (superclass) => {

          var superclass = superclass
          console.log( superclass.nativeElement.children[0].classList )
          console.log( superclass.nativeElement.children )

          if (this.previousUrl == superclass.nativeElement.getAttribute("routerLink")) {
            this.renderer.addClass(superclass.nativeElement.children[0], "box")
            console.log("add class")

          } else {
            this.renderer.removeClass(superclass.nativeElement.children[0], "box")
            console.log("remove class")
          }

        });
})
//update is done
}
ngOnDestroy(): void { this.subscription.unsubscribe(); }


//class is done
}

注意: 对于编程方式，请确保添加router-link，并且它接受一个子元素。如果你想要改变它，你需要在superclass.nativeElement上去掉子元素。

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

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

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

我解决了在这个环节遇到的一个问题，我发现你的问题有一个简单的解决方案。你可以在样式中使用router-link-active。

@Component({
   styles: [`.router-link-active { background-color: red; }`]
})
export class NavComponent {
}