Bootstrap navbarの "active"クラスを角2で設定するには？

Question

どのように角度2のブートストラップナビバー「アクティブ」クラスを設定できますか？私は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

を追跡しました。 （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" 次の簡単なコードが動作するAngular2 RC4の最新版について

Answer 2

はRouterクラスからgenerateでisRouteActiveを使用してください。ドキュメントによれば

：

を生成する（linkParamsは：任意[]）：命令

が提供ルートリンクDSLに基づいて命令を生成します。

と

isRouteActive（命令：命令）：

ブールは、命令を指示は、そうでない場合はfalse、現在アクティブ である場合に真を返します。私のために動作しませんでしたRC2で

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

Answer 3

。私は

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

を使用して終了し、新しい3.0.0を使用する場合は、コードに後ろのそれを

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

：

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

"@ angle/router"からののimport {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"

私は単に私が

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

私app.route.tsに宣言し、ビューで、私はちょうどで

<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はちょうどremovので、文句を言うだろうそれはあなたが探しているまさにではありませんが、電子ブラケット

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