Comment définir la classe "active" de la barre de navigation Bootstrap dans Angular 2? J'ai seulement trouvé angulaire 1 voie .
Lorsque je vais à la page À propos de, ajoutez class="active"
à À propos de et supprimez class="active"
dans Home.
<ul class="nav navbar-nav">
<li class="active"><a [routerLink]="['Home']">Home</a></li>
<li><a [routerLink]="['About']">About</a></li></li>
</ul>
Merci
Si vous utilisez la nouvelle version 3.0.0. composant routeur ( https://github.com/angular/vladivostok ), vous pouvez utiliser la directive routerLinkActive. Aucun autre javascript requis.
<ul class="nav navbar-nav">
<li [routerLinkActive]="['active']"> <a [routerLink]="['one']">One</a></li>
<li [routerLinkActive]="['active']"> <a [routerLink]="['second']">Second</a></li>
</ul>
J'ai utilisé "@ angular/router": "^ 3.0.0-alpha.7"
La réponse de Bert Deterd est correcte, mais il y a une chose qui peut être ajoutée.
Si une route est une sous-chaîne d'une autre route, vous verrez quelque chose comme ceci: 2 ancres actives
Vous pouvez ajouter ceci pour faire correspondre les itinéraires exacts uniquement:
[routerLinkActiveOptions]="{exact:true}"
Exemple complet:
<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>
Pour la dernière version de Angular2 RC4, le code simple suivant fonctionne:
<li [class.active]="router.url==='/about'"><a [routerLink]="['/about']">About</a></li>
Utilisation de import {Router} depuis "@ angular/router"; et mettez le routeur dans le constructeur.
Utilisez la variable isRouteActive
avec generate
à partir de Routeur classe.
Selon les docs:
generate (linkParams: any []): Instruction
Générez une instruction basée sur le DSL Route Link fourni.
et
isRouteActive (instruction: Instruction): boolean
Avec une instruction, retourne vrai si l'instruction est actuellement actif, sinon faux.
<li [class.active]="router.isRouteActive(router.generate(['/Home']))">
<a [routerLink]="['/Home']">Home</a>
</li>
Cela fait l'affaire (en utilisant RC5)
<li [class.active]="homeLink.classList.contains('active')">
<a #homeLink routerLink="/home" routerLinkActive="active">Home</a>
</li>
Dans "@ angular/router": "^ 3.3.1", la différence dans la version précédente est le support dans la routerLinkActive
[routerLinkActive]="['active']"
Dans la version finale, ng2 se plaindra alors il suffit de retirer le support
routerLinkActive="active"
Sur RC2 cela ne fonctionnait pas pour moi. J'ai fini par utiliser
<li (click)="setActive('home')" class="{{getActive('home')}}"> <a [routerLink]="['/FullScreen']">Home</a></li>
et dans le code derrière suivi
currentChoice: string = "home";
setActive(choice: string): void{
this.currentChoice = choice;
}
getActive(choice: string) : string{
if(this.currentChoice == choice)
return "active";
else
return "not";
}
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];
La version "@ angular/router": "^ 3.3.1"
Je mets simplement le nom de la route, que je déclare dans mon 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);
Et dans la vue, je viens d'écrire le nom de la route
<ul class="nav navbar-nav">
<li routerLinkActive="active"><a routerLink="">Home</a></li>
<li><a routerLink="declarations">SAV</a></li>
</ul>
Dans le cas de liens multiples essayez ceci
<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>
<a routerLink="/user/bob" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:
true}">Bob</a>