如何在Angular 2中设置Bootstrap navbar“active”类?我只找到了Angular 1 way。
当我转到About页面时,将class="active"
添加到About,并删除Home上的class="active"
。
<ul class="nav navbar-nav">
<li class="active"><a [routerLink]="['Home']">Home</a></li>
<li><a [routerLink]="['About']">About</a></li></li>
</ul>
谢谢
如果您使用新的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”
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>
Bert Deterd的答案是正确的,但有一件事可以补充。
如果一条路线是另一条路线的子串,你会看到类似的事情:2 active anchors
您可以添加此选项以使其仅与精确路线匹配:
[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”中的import {Router};并将路由器放在构造函数中。
使用isRouteActive
和generate
Router
类。
根据文件:
generate(linkParams:any []):指令
根据提供的Route Link DSL生成指令。
和
isRouteActive(指令:指令):布尔值
给定一条指令,如果指令当前处于活动状态则返回true,否则返回false。
<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>