如何在Angular 2中设置Bootstrap导航栏“活动”类?


74

如何在Angular 2中设置Bootstrap导航栏“活动”类?我只找到Angular 1方式

当我转到关于页面时,将添加class="active"关于,然后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>

谢谢


1
尽管这并不是您要找的东西,但我相信当该链接处于活动状态时,routerLink会自动将该类设置为router-link- active。因此,如果在您的项目中可行,我将在您的CSS中使用.router-link-active类。
加布

Answers:


166

如果使用新的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”


1
Dart有对应的产品吗?
富兰克林于

="active"(错误)和="['active']"(正确)之间仍然感到困惑。谢谢
superjos 16/12/26

1
@superjos可能允许在当前路由确实处于活动状态的情况下添加多个类/值
jarodsmk

1
简单而完美的答案,谢谢你
Hidayt Rahman

1
@superjos除了n15m0-jk的答案外,您只能为一个类添加routerLinkActive =“ active”。
雨果·帕索斯

65

伯特·德特(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>

我遇到了这个问题,它的本地路由只是应用程序域(空字符串)。它始终显示为活动状态。
维克

我遇到了一个问题,即单击链接外部(例如,在网络的中心)使li失效。这是因为我在anchor标签而不是a标签中有angular指令。在我看来,这没有什么区别,但是它以您的方式起作用,mybae,此注释可以帮助其他人。谢谢!
Mese

完美的答案
Sushin Pv

1
您的[routerLinkActiveOptions] =“ {exact:true}”参数确实可以帮助您。对于那些对此感兴趣的用户,当用户位于另一页上时,它会阻止活动类在['/']主页上激活,因为它与路径完全匹配。
阿里·卡扎伊

惊人!谢谢!
PhillipJacobs

10

对于最新版本的Angular2 RC4,以下简单代码适用:

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

使用从“ @ angular / router”导入{Router}; 并将路由器放入构造函数中。


对我来说很好(Y)。但是我怀疑如果出现下拉菜单,我将在这里做什么。例如“ <li class =” dropdown“> <ul> <li> <a> </ li> </ ul> </ li>。 ”。如果是这种情况,我们该怎么办?
Deepak Pookkote

6

使用isRouteActivegenerate路由器类。

根据文档:

generate(linkParams:any []):指令

根据提供的路由链接DSL生成指令。

isRouteActive(instruction:Instruction):布尔值

给定一条指令,如果该指令当前处于活动状态,则返回true,否则返回false。

<li [class.active]="router.isRouteActive(router.generate(['/Home']))">
   <a [routerLink]="['/Home']">Home</a>
</li>

4
在angular2 rc1中,必须将其更改为以下内容:[class.active]="router.urlTree.contains(router.createUrlTree(['Home']))"。另外,我想指出的是,必须对路由器进行注入这样的成分:constructor(public router: Router)
弗朗Žiačik

1
为了检查根路径/,我做了router.urlTree._root.children.length == 0。似乎有问题,但可以。
Sam Barnum

此处仅需注意:如果您的组件中的构造函数看起来像:构造函数(私有路由器:Router),则上述所有方法都可以使用,但是由于路由器具有私有访问权限,因此您将无法进行生产。
jarodsmk

5

这可以解决问题(使用RC5)

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

2

在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";

   }

2

在“ @ angular / router”:“ ^ 3.3.1”中,与先前版本的区别在于routerLinkActive中的括号

[routerLinkActive]="['active']"

在最终版本中,ng2会抱怨,因此只需卸下支架

routerLinkActive="active"

1

如果有多个链接,请尝试以下操作

<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>

0

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

0

<a routerLink="/user/bob" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:
true}">Bob</a>


0
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];

请考虑添加一些说明。
Sunil
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.