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
twitter-bootstrap
angular
nav
angular2-routing
Hongbo Miao
quelle
quelle
Antworten:
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"
quelle
="active"
(falsch) und="['active']"
(richtig). DankeDie 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>
quelle
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.
quelle
Verwenden Sie das
isRouteActive
withgenerate
aus derRouter-Klasse.Laut Dokumentation:
und
<li [class.active]="router.isRouteActive(router.generate(['/Home']))"> <a [routerLink]="['/Home']">Home</a> </li>
quelle
[class.active]="router.urlTree.contains(router.createUrlTree(['Home']))"
. Außerdem möchte ich darauf hinweisen, dass der Router wieconstructor(public router: Router)
/
, habe ich es getanrouter.urlTree._root.children.length == 0
. Scheint eklig, funktioniert aber.Dies macht den Trick (mit RC5)
<li [class.active]="homeLink.classList.contains('active')"> <a #homeLink routerLink="/home" routerLinkActive="active">Home</a> </li>
quelle
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"; }
quelle
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"
quelle
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>
quelle
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>
quelle
<a routerLink="/user/bob" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">Bob</a>
quelle
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];
quelle