Wie setze ich die Bootstrap-Navigationsleiste in Angular 2 auf "aktiv"?

73

Wie kann ich die Bootstrap-Navigationsleiste in Angular 2 auf "aktiv" setzen? Ich habe Angular nur 1 Weg gefunden .

Wenn ich zur Seite " Info" gehe , füge sie class="active"zu " Info" hinzu und entferne sie class="active"auf der Startseite .

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

Vielen Dank

Hongbo Miao
quelle
1
Obwohl es nicht genau das ist, wonach Sie suchen, glaube ich, dass routerLink die Klasse automatisch auf router-link-active setzt, wenn dieser Link aktiv ist. Wenn es in Ihrem Projekt möglich ist, würde ich die Klasse .router-link-active in Ihrem CSS verwenden.
Gabu

Antworten:

165

Wenn Sie die neue Version 3.0.0 verwenden. Komponenten-Router ( https://github.com/angular/vladivostok ) Sie können die Anweisung routerLinkActive verwenden . Kein weiteres Javascript erforderlich.

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

Ich habe "@ angle / router" verwendet: "^ 3.0.0-alpha.7"

Bert Deterd
quelle
1
Gibt es ein Gegenstück in Dart?
Franklin Yu
immer noch verwirrt zwischen ="active"(falsch) und ="['active']"(richtig). Danke
Superjos
1
@superjos wahrscheinlich für das Hinzufügen mehrerer Klassen / Werte, wenn die aktuelle Route tatsächlich in einem aktiven Zustand ist
jarodsmk
1
Einfache und perfekte Antwort, danke Mann
Hidayt Rahman
1
@superjos Zusätzlich zur Antwort von n15m0-jk können Sie routerLinkActive = "active" für nur eine Klasse hinzufügen.
Hugo Passos
64

Die Antwort von Bert Deterd ist richtig, aber eines kann hinzugefügt werden.

Wenn eine Route eine Teilzeichenfolge einer anderen Route ist, sehen Sie Folgendes: 2 aktive Anker

Sie können dies hinzufügen, damit es nur mit exakten Routen übereinstimmt:

[routerLinkActiveOptions]="{exact:true}"

Vollständiges Beispiel:

<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>
Andrew Roth
quelle
Ich bin darauf gestoßen, wobei die Home-Route nur die App-Domain war (leere Zeichenfolge). Es zeigte sich immer als aktiv.
Vic
Ich bin auf ein Problem gestoßen, bei dem das Klicken außerhalb des Links (zum Beispiel in der Mitte des Webs) die Li inaktiv machte. Dies lag daran, dass ich die Winkelanweisungen im Ankertag anstelle des a-Tags hatte. In meinem Kopf hat das keinen Unterschied, aber es funktioniert auf deine Weise, mybae dieser Kommentar hilft jemand anderem. Vielen Dank!
Mese
Die perfekte Antwort
Sushin Pv
1
Ihr Parameter [routerLinkActiveOptions] = "{genau: wahr}" hilft wirklich, danke. Für diejenigen, die daran interessiert sind, was es tut, um zu verhindern, dass die aktive Klasse auf der ['/'] Homepage aktiviert wird, wenn sich der Benutzer auf einer anderen Seite befindet, da sie genau dem Pfad entspricht, wie er ist.
Ali Kazai
tolle! Vielen Dank!
PhillipJacobs
9

Für die neueste Version von Angular2 RC4 funktioniert der folgende einfache Code:

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

Verwenden des Imports {Router} von "@ angle / router"; und setzen Sie den Router in den Konstruktor.

Johannes
quelle
funktioniert gut für mich (Y). Aber ich habe Zweifel, was ich hier tun werde, falls ein Dropdown-Menü vorhanden ist. Beispiel "<li class =" dropdown "> <ul> <li> <a> </ li> </ ul> </ ul> </ ul>. ". Was müssen wir tun, wenn dies das Szenario ist?
Deepak Pookkote
6

Verwenden Sie das isRouteActivewith generateaus der Router- Klasse.

Laut Dokumentation:

generate (linkParams: any []): Anweisung

Generieren Sie eine Anweisung basierend auf dem bereitgestellten Route Link DSL.

und

isRouteActive (Anweisung: Anweisung): boolean

Gibt bei einer gegebenen Anweisung true zurück, wenn die Anweisung derzeit aktiv ist, andernfalls false.

<li [class.active]="router.isRouteActive(router.generate(['/Home']))">
   <a [routerLink]="['/Home']">Home</a>
</li>
Pixelbits
quelle
4
In angle2 rc1 muss dies folgendermaßen geändert werden : [class.active]="router.urlTree.contains(router.createUrlTree(['Home']))". Außerdem möchte ich darauf hinweisen, dass der Router wie constructor(public router: Router)
folgt
1
Um nach dem Stammpfad zu suchen /, habe ich es getan router.urlTree._root.children.length == 0. Scheint eklig, funktioniert aber.
Sam Barnum
Nur eine Anmerkung hier: Wenn Ihr Konstruktor in Ihrer Komponente wie folgt aussieht: Konstruktor (privater Router: Router), funktioniert alles oben Genannte, aber Sie können nicht für die Produktion erstellen, da der Router über privaten Zugriff verfügt.
Jarodsmk
4

Dies macht den Trick (mit RC5)

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

Auf RC2 hat das bei mir nicht funktioniert. Am Ende habe ich verwendet

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

und im Code dahinter verfolgt es

    currentChoice: string = "home";

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

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

   }
Matrim
quelle
2

In "@ angle / router": "^ 3.3.1" ist der Unterschied zur vorherigen Version die Klammer im routerLinkActive

[routerLinkActive]="['active']"

In der endgültigen Version wird sich ng2 beschweren. Entfernen Sie einfach die Halterung

routerLinkActive="active"
brijmcq
quelle
1

Versuchen Sie dies bei mehreren Links

<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>
Sachin
quelle
0

Die Version "@ angle / router": "^ 3.3.1"

Ich gebe einfach den Namen der Route ein, die ich in meiner app.route.ts deklariere

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

Und in der Ansicht schreibe ich einfach den Namen der Route

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

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

Yathish
quelle
0
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];
Feroz
quelle
Bitte fügen Sie eine Erklärung hinzu.
Sunil