Comment définir Bootstrap navbar" active " classe dans Angular 2?
comment définir Bootstrap navbar" active " classe dans Angular 2? Je n'ai trouvé que Angulaire 1 .
quand je vais à à propos de page, Ajouter class="active"
à à propos de , et supprimer class="active"
sur accueil .
<ul class="nav navbar-nav">
<li class="active"><a [routerLink]="['Home']">Home</a></li>
<li><a [routerLink]="['About']">About</a></li></li>
</ul>
Merci
10 réponses
si vous utilisez le nouveau 3.0.0. routeur composant ( ) https://github.com/angular/vladivostok ) vous pouvez utiliser la directive routerLinkActive . Aucun autre javascript n'est 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é "@angulaire/routeur": "^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 un itinéraire est une sous-couche d'un autre itinéraire, vous verrez quelque chose comme ceci arriver: 2 ancres actives
vous pouvez ajouter ceci pour faire correspondre les routes exactes seulement:
[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 les travaux de code simple suivants:
<li [class.active]="router.url==='/about'"><a [routerLink]="['/about']">About</a></li>
utilisant importer {Router} de "@angular / router"; et de mettre le routeur dans le constructeur.
utilisez le isRouteActive
avec generate
de la classe Routeur .
selon docs:
générer(linkParams: aucun []) : "d'Instruction 1519140920"
générer une Instruction basée sur la liaison DSL fournie.
et
isRouteActive (instruction: Instruction) : booléen
donne une instruction, renvoie true si l'instruction est actuellement active, sinon false.
<li [class.active]="router.isRouteActive(router.generate(['/Home']))">
<a [routerLink]="['/Home']">Home</a>
</li>
Cela fait l'affaire (à l'aide de RC5)
<li [class.active]="homeLink.classList.contains('active')">
<a #homeLink routerLink="/home" routerLinkActive="active">Home</a>
</li>
sur RC2 qui n'a pas fonctionné pour moi. J'ai fini par utiliser
<li (click)="setActive('home')" class="{{getActive('home')}}"> <a [routerLink]="['/FullScreen']">Home</a></li>
et dans le code de suivi
currentChoice: string = "home";
setActive(choice: string): void{
this.currentChoice = choice;
}
getActive(choice: string) : string{
if(this.currentChoice == choice)
return "active";
else
return "not";
}
dans "@angular / router": "^3.3.1", la différence dans la version précédente est le support dans le routerLinkActive
[routerLinkActive]="['active']"
Dans la version finale, ng2 va se plaindre il suffit donc de retirer le support
routerLinkActive="active"
La version "@angulaire/routeur": "^3.3.1"
j'ai simplement mis le nom de la route, que je déclare dans mon application.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>
<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];