如何设置自举导航栏“活动”类在角度2？

在 一个 href = “ https://angular.io/docs/js/update/api/Router/Router-class.html”rel = “ nofollow norefrer”> 路由器 类中使用 isRouteActive和 generate。

文件显示:

Create (linkParams: any []) : 指令

基于提供的路由链路 DSL 生成指令。

还有

IsRouteActive (指令: 指令) : boolean

给定一条指令，如果该指令当前为 有效，否则为假。

<li [class.active]="router.isRouteActive(router.generate(['/Home']))">
<a [routerLink]="['/Home']">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";


}

如果您使用新的3.0。组件路由器(https://github.com/angular/vladivostok)可以使用 路由器指令。不需要进一步的 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>

我使用“@angle/router”: “ ^ 3.0.0-alpha.7”

对于 Angular2 RC4的最新版本，以下简单代码可以工作:

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

使用 < em > import { Router } from“@angle/Router”; 并将路由器放入构造函数中。

这样就可以了(使用 RC5)

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

伯特 · 迪特德的回答是正确的，但有一点可以补充。

如果一个路由是另一个路由的子字符串，您将看到类似的情况发生: 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>

版本 “@angle/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>

在“@angle/router”: “ ^ 3.3.1”中，前一版本的区别是 routerLinkActive 中的括号

[routerLinkActive]="['active']"

在最终版本中，ng2会抱怨，所以只需删除括号

routerLinkActive="active"

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>