Cómo establecer Bootstrap navbar clase "activo" en Angular 2?

La respuesta de Bert Deterd es correcta, pero hay una cosa que se puede agregar.

Si una ruta es una subcadena de otra ruta, verá que algo como esto sucede: 2 anclas activas

Puede agregar esto para que coincida con las rutas exactas solamente:

[routerLinkActiveOptions]="{exact:true}"

Ejemplo completo:

<ul class="nav navbar-nav">
  <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
    <a [routerLink]="['/']">Home</a>
  </li>
  <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
    <a [routerLink]="['/about']">About</a>
  </li>
  <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
    <a [routerLink]="['/calendar']">Calendar</a>
  </li>
</ul>

Para la última versión de Angular2 RC4 funciona el siguiente código simple:

      <li [class.active]="router.url==='/about'"><a [routerLink]="['/about']">About</a></li>

Usando importa {Router} desde "@ angular / router"; y poner el router en el constructor.

Utilice el isRouteActive con generate de la Router clase.

Según los documentos:

Generate (linkParams: any []): Instruction

Generar una Instrucción basada en el Enlace de ruta proporcionado DSL.

Y

IsRouteActive (instrucción: Instrucción) : booleano

Dada una instrucción, devuelve true si la instrucción está activo, de lo contrario falso.

<li [class.active]="router.isRouteActive(router.generate(['/Home']))">
   <a [routerLink]="['/Home']">Home</a>
</li>

Esto hace el truco (usando RC5)

<li [class.active]="homeLink.classList.contains('active')">
    <a #homeLink routerLink="/home" routerLinkActive="active">Home</a>
</li>

En RC2 eso no funcionó para mí. Terminé usando

   <li  (click)="setActive('home')" class="{{getActive('home')}}"> <a [routerLink]="['/FullScreen']">Home</a></li>

Y en el código detrás lo rastreó

    currentChoice: string = "home";

   setActive(choice: string): void{
       this.currentChoice = choice;
   }

   getActive(choice: string) : string{
       if(this.currentChoice == choice)
            return "active";
       else
            return "not";

   }

En "@ angular / router": "^3.3.1", la diferencia en la versión anterior es el soporte en el routerLinkActive

[routerLinkActive]="['active']"

En la versión final, ng2 se quejará, así que simplemente retire el soporte

routerLinkActive="active"

La versión "@angular/router": "^3.3.1"

Simplemente pongo el nombre de la ruta, que declaro en mi aplicación.ruta.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule }   from '@angular/router';

import { HomeComponent } from './home/home.component';
import { DeclarationsComponent } from './declarations/declarations.component';

const appRoutes: Routes = [
    { path: '', pathMatch: 'full', component: HomeComponent },
    { path: 'declarations', pathMatch: 'full', component: DeclarationsComponent }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Y en la vista, solo escribo el nombre de la ruta

  <ul class="nav navbar-nav">
     <li routerLinkActive="active"><a routerLink="">Home</a></li>
     <li><a routerLink="declarations">SAV</a></li>
  </ul>

<a routerLink="/user/bob" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:
true}">Bob</a>

import { Directive, HostListener, ElementRef, HostBinding, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appNavDropdown]'
})
export class NavDropdownDirective {
  isOpen:boolean =false;
  counter:number = 0;
  constructor(private el: ElementRef, private render: Renderer2) { }

  @HostBinding('class.open') get opened() {
    return this.isOpen;
  }

  @HostListener('click') onmouseClick()
  {
    this.counter++
    console.log();
    if(this.counter % 2 == 1)//odd
    {
      let part = this.render.parentNode(this.el.nativeElement);
      this.render.addClass(part,'open');
      this.isOpen = true;
    }else{
      let part = this.render.parentNode(this.el.nativeElement);
      this.render.removeClass(part,'open');
      this.isOpen = false;
    }
  }
  // @HostListener('mouseleave') onmouseLeave()
  // {
  //   let part = this.render.parentNode(this.el.nativeElement);
  //   this.render.removeClass(part,'open');
  //   this.isOpen = false;
  // }

  toggleClose() {
    // let part = this.render.parentNode(this.el.nativeElement)
    //this.menuclick = false;

  }
  toggle() {
    this.el.nativeElement.classList.toggle('open');
  }
}

/**
* Allows the dropdown to be toggled via click.
*/
@Directive({
  selector: '[appNavDropdownToggle]'
})
export class NavDropdownToggleDirective {
  constructor(private dropdown: NavDropdownDirective) { }

  @HostListener('click', ['$event'])
  toggleOpen($event: any) {
    console.log($event)
    $event.preventDefault();
  //  this.dropdown.toggleClose()
   this.dropdown.toggle();
  }
}

export const NAV_DROPDOWN_DIRECTIVES = [NavDropdownDirective, NavDropdownToggleDirective];