如何在Angular 2中设置Bootstrap navbar“active”类？-Java 学习之路

如何在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>

谢谢

10 回答

这样做（使用RC5）

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

回复于 2024-04-26T01:58:32+08:00

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

   }

回复于 2024-04-26T01:58:32+08:00

133
在“@ angular / router”：“^ 3.3.1”中，先前版本的差异是routerLinkActive中的括号
```
[routerLinkActive]="['active']"
```
在最终版本中，ng2会抱怨所以只需删除支架即可
```
routerLinkActive="active"
```
回复于 2024-04-26T01:58:32+08:00
5
如果您使用新的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”
回复于 2024-04-26T01:58:32+08:00

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>

回复于 2024-04-26T01:58:32+08:00

8
对于最新版本的Angular2 RC4，以下简单代码有效：
```
<li [class.active]="router.url==='/about'"><a [routerLink]="['/about']">About</a></li>
```
使用"@angular/router"中的import ;并将路由器放在构造函数中 .
回复于 2024-04-26T01:58:32+08:00
1
使用Router类中的 isRouteActive 和 generate .

根据文件：

generate（linkParams：any []）：指令根据提供的Route Link DSL生成指令 .

和

isRouteActive（instruction：Instruction）：boolean给定一条指令，如果指令当前处于活动状态则返回true，否则返回false .
```
<li [class.active]="router.isRouteActive(router.generate(['/Home']))">
   <a [routerLink]="['/Home']">Home</a>
</li>
```
回复于 2024-04-26T01:58:32+08:00

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

回复于 2024-04-26T01:58:32+08:00

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

回复于 2024-04-26T01:58:32+08:00

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

回复于 2024-04-26T01:58:32+08:00

如何在Angular 2中设置Bootstrap navbar“active”类？

10 回答

相关问题