Если Вы используете новые 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"
Ответ Bert Deterd корректен, но существует одна вещь, которая может быть добавлена.
, Если один маршрут является подстрокой другого маршрута, Вы будете видеть, что что-то вроде этого происходит: 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"; и помещенный маршрутизатор в конструктора.
Используйте isRouteActive
с generate
от маршрутизатора класс.
Согласно документам:
генерируют (linkParams: любой []): Инструкция
Генерирует Инструкцию на основе предоставленной Ссылки Маршрута DSL.
и
isRouteActive (инструкция: Инструкция): булевская переменная
, Учитывая инструкцию, возвращает true, если инструкция является в настоящее время активной, в других отношениях ложной.
<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"
Версия " @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];
В случае нескольких ссылок пробуют это
<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>