Angular 2에서 부트스트랩 navbar "active" 클래스를 설정하는 방법은 무엇입니까?

Angular 2에서 부트스트랩 navbar "active" 클래스를 설정하는 방법은 무엇입니까?

Angular 2에서 부트스트랩 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>

감사해요.

새 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개의 활성 앵커

다음을 추가하여 정확한 경로와 일치하도록 할 수 있습니다.

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

Angular2 RC4의 최신 버전의 경우 다음과 같은 간단한 코드가 작동합니다.

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

"@angular/router"에서 {Router} 가져오기를 사용하여 라우터를 생성자에 넣습니다.

사용isRouteActive와 함께generate라우터 클래스에서.

문서에 따르면:

generate(linkParams: any[]) : 명령

제공된 경로 링크 DSL을 기반으로 명령을 생성합니다.

그리고.

isRouteActive(지침:명령) : 부울

명령이 지정되면 명령이 현재 활성 상태이면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

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

이렇게 하면 효과가 있습니다(RC5 사용).

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

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

   }

"@angular/router": "^3.3.1"에서 이전 버전의 차이는 routerLinkActive의 괄호입니다.

[routerLinkActive]="['active']"

최종 릴리스에서 ng2가 불만을 제기할 것이므로 브래킷만 제거합니다.

routerLinkActive="active"

여러 링크의 경우 다음을 시도합니다.

<ul class="navbar-nav ml-auto"> 
<li class="nav-item " routerLink="" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">
<a class="nav-link" routerLink="">Home </a></li>
<li class="nav-item" [routerLinkActive]="['active']">
<a class="nav-link" routerLink="/aboutus">About</a></li>
<li class="nav-item" [routerLinkActive]="['active']">
<a class="nav-link" routerLink="/gallery">Gallery</a>
 </li>
<li class="nav-item" [routerLinkActive]="['active']">
<a class="nav-link" routerLink="/contactus">Contact Us</a>
</li>
</ul>

버전 "@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>

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

언급URL : https://stackoverflow.com/questions/35422526/how-to-set-bootstrap-navbar-active-class-in-angular-2