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

【问题标题】：How to set Bootstrap navbar "active" class in Angular 2?如何在 Angular 2 中设置 Bootstrap 导航栏“活动”类？
【发布时间】：2016-05-27 03:21:30
【问题描述】：

如何在 Angular 2 中设置 Bootstrap 导航栏“活动”类？我只找到Angular 1 way。

当我进入关于页面时，将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>

谢谢

【问题讨论】：

  • 虽然它不是您正在寻找的，但我相信 routerLink 在该链接处于活动状态时会自动将类设置为 router-link-active。因此，如果它可能在您的项目中，我会在您的 css 中使用 .router-link-active 类。

标签： twitter-bootstrap angular nav angular2-routing


【解决方案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>

【讨论】：

    【解决方案2】： 
    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];

    【讨论】：

    • 请考虑添加一些解释。
    【解决方案3】： 

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

    【讨论】：

      【解决方案4】：

      在 "@angular/router": "^3.3.1" 中，与上一版本不同的是routerLinkActive中的括号

      [routerLinkActive]="['active']"

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

      routerLinkActive="active"

      【讨论】：

        【解决方案5】：

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

        【讨论】：

          【解决方案6】：

          将isRouteActive 与Router 类中的generate 结合使用。

          根据文档：

          generate(linkParams: any[]) : 指令

          根据提供的 Route Link DSL 生成指令。

          和

          isRouteActive（指令：指令）：布尔值

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

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

          【讨论】：

          • 在 angular2 rc1 中，必须将其更改为：[class.active]="router.urlTree.contains(router.createUrlTree(['Home']))"。另外，我想指出路由器必须像这样注入到组件中：constructor(public router: Router)
          • 为了检查根路径/，我做了router.urlTree._root.children.length == 0。看起来很恶心，但很有效。
          • 这里请注意：如果在您的组件中，您的构造函数看起来像：构造函数（私有路由器：路由器），以上所有方法都可以工作，但您将无法构建生产环境，因为路由器具有私有访问权限。
          【解决方案7】：

          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>

          【讨论】：

          • 我遇到了这个问题，主路由只是应用程序域（空字符串）。它始终显示为活动状态。
          • 我遇到了一个问题，点击链接外部（例如在网络中心）使 li 无效。这是因为我在锚标签而不是 a 标签中有角度指令。在我看来，这没有区别，但它以您的方式起作用，mybae 此评论对其他人有所帮助。谢谢！
          • 完美答案
          • 您的 [routerLinkActiveOptions]="{exact:true}" 参数真的很有帮助，谢谢。对于那些对它做什么感兴趣的人，当用户在不同的页面上时，它会阻止活动类在 ['/'] 主页上激活，因为它与路径完全匹配。
          • 太棒了！谢谢！
          【解决方案8】：

          这可以解决问题（使用 RC5）

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

          【讨论】：

            【解决方案9】：

            对于 Angular2 RC4 的最新版本，以下简单代码有效：

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

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

            【讨论】：

            • 对我来说很好（Y）。但我怀疑如果出现下拉菜单，我会在这里做什么......例如“
              • 。 ”。如果是这种情况我们该怎么办？
            【解决方案10】：

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

            【讨论】：

            • Dart 中的任何对应物？
            • 仍然对="active"（错误）和="['active']"（正确）感到困惑。谢谢
            • @superjos 可能是为了在当前路由确实处于活动状态时允许添加多个类/值
            • 简单而完美的答案，谢谢伙计
            • @superjos 除了 n15m0-jk 的回答，你可以只为一个类添加 routerLinkActive="active"。
            【解决方案11】：

            在对我不起作用的 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";

   }

            【讨论】：

              猜你喜欢
              相关资源
              最近更新 更多
              热门标签
              Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode