Как установить "активный" класс Bootstrap navbar в Angular 2?

Ответ 1

Если вы используете новый 3.0.0. (https://github.com/angular/vladivostok) вы можете использовать директиву routerLinkActive. Никакой дальнейший javascript не требуется.

<ul class="nav navbar-nav">
  <li [routerLinkActive]="['active']"> <a [routerLink]="['one']">One</a></li>
  <li [routerLinkActive]="['active']"> <a [routerLink]="['second']">Second</a></li>
</ul>

Я использовал "@ angular/router": "^ 3.0.0-alpha.7"

Ответ 2

Ответ Bert Deterd правильный, но есть одна вещь, которую можно добавить.

Если один маршрут является подстрокой другого маршрута, вы увидите что-то подобное: 2 активных якоря

Вы можете добавить это, чтобы оно соответствовало только точным маршрутам:

[routerLinkActiveOptions]="{exact:true}"

Полный пример:

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

Ответ 3

Используйте isRouteActive с generate из класса Router.

Согласно документам:

generate (linkParams: any []): Инструкция

Создайте инструкцию на основе предоставленной DSL линии маршрутизации.

и

isRouteActive (инструкция: инструкция): boolean

Учитывая инструкцию, возвращает true, если инструкция в настоящее время active, в противном случае false.

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

Ответ 4

Для последней версии Angular2 RC4 работает следующий простой код:

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

Использование импорта {Router} из "@angular/router"; и поместите маршрутизатор в конструктор.

Ответ 5

Это делает трюк (используя RC5)

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

Ответ 6

На RC2, который не работал у меня. Я закончил тем, что использовал

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

и в отслеживаемом коде

    currentChoice: string = "home";

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

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

   }

Ответ 7

В "@ angular/router": "^ 3.3.1" разница в предыдущей версии - это скобка в routerLinkActive

[routerLinkActive]="['active']"

В финальной версии ng2 будет жаловаться, поэтому просто удалите скобку

routerLinkActive="active"

Ответ 8

Версия "@ angular/router": "^ 3.3.1"

Я просто указываю имя маршрута, которое я объявляю в своем app.route.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);

И в представлении я просто пишу имя маршрута

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

Ответ 9

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