如何在Angular 2中設置Bootstrap navbar「active」類？

Question

如何在Angular 2中設置Bootstrap navbar「active」類？我只發現了Angular 1 way。

當我去關於頁面，添加class="active"到關於，並首頁刪除class="active"。

<ul class="nav navbar-nav"> 
    <li class="active"><a [routerLink]="['Home']">Home</a></li> 
    <li><a [routerLink]="['About']">About</a></li></li> 
</ul> 

感謝

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

我用 「@角/路由器」： 「^ 3.0.0-alpha.7」

Answer 2

從Router類使用isRouteActive與generate。

根據文檔：

生成（linkParams：任何[]）：指令

生成基於所提供的路由鏈路DSL的指令。

和

isRouteActive（指令：指令）：布爾

給出的指令，如果該指令是目前 活躍，否則爲false返回true。

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

Answer 3

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

    } 

Answer 4

至於最新版本Angular2 RC4以下簡單的代碼工作：

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

使用從「@ angular/router」導入{Router}; 並將路由器放在構造函數中。

Answer 5

該做的伎倆（使用RC5）

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

Answer 6

伯特Deterd的答案是正確的，但有一兩件事是可以添加。

如果一條路徑是另一條路線的子串，你會看到這樣的事情發生：2 active anchors

您可以添加這使其精確匹配的路由只有：

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

Answer 7

版本「@角/路由器」： 「^ 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> 

Answer 8

之名「@角/路由器」：「^ 3.3.1」，在先前版本的區別是在routerLinkActive

[routerLinkActive]="['active']" 

在最終釋放所述支架，NG2會抱怨所以只是祛瘀Ë支架

routerLinkActive="active" 

Answer 9

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

Answer 10

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