如何在Angular 2中启用或禁用Bootstrap Twitter的导航选项卡？

Question

我有一个导航栏，使用 Twitter Bootstrap，在其中一个选项卡 (#B ..) 中，我有一张图片，点击它会切换到另一个选项卡 (#C ..)。

我可以改变那个选项卡，但是我无法将新的选项卡 (#C ..) 设置为活动状态。并且需要将这个图片选项卡 (#B ..) 设置为非活动状态（例如移除类 active）。

<ul class="nav nav-tabs">
    <li class="nav active"> <a [attr.href]="'#A' + cObj" data-toggle="tab"> Info </a></li>
    <li class="nav">        <a [attr.href]="'#B' + cObj" data-toggle="tab"> Info </a></li>
    <li class="nav">        <a [attr.href]="'#C' + cObj" data-toggle="tab"> Info </a></li>
</ul>

---

<div class="tab-pane fade"           [id]="'B' + cObj">
..//

<a [attr.href]="'#C' + cObj" data-toggle="tab">
<img...>
..//

我尝试以各种方式使用[class.active] =" false "，例如[ '#B' + cObj.class.active] =" false "等，但我无法做到，有什么帮助可以提供给我。

我希望能够激活和停用选项卡，在不同选项卡之间切换。对我的糟糕英语表示抱歉，希望您能理解我的问题。

---

更新: 我使用以下方法解决了问题。

也许用户的反馈可以帮助其他人：

• Thierry Templier

• Sasxa

• Günter Zöchbauer

---

<ul class="nav nav-tabs">
    <li class="nav active" [id]="'IDA' + contadorObjet.name" [class.active]="testLocation1() == ('A' + contadorObjet.name) || '10'" >       <a [attr.href]="'#A' + contadorObjet.name" data-toggle="tab"> Info </a></li>
    <li class="nav"        [id]="'IDB' + contadorObjet.name" [class.active]="testLocation1() == 'B' + contadorObjet.name">                  <a [attr.href]="'#B' + contadorObjet.name" data-toggle="tab"> Info </a></li>
    <li class="nav"        [id]="'IDC' + contadorObjet.name" [class.active]="testLocation1() == 'C' + contadorObjet.name">                  <a [attr.href]="'#C' + contadorObjet.name" data-toggle="tab"> Info </a></li>
</ul>

注意：'10'是测试的父ID

---

<a [attr.href]="'#C' + contadorObjet.name" data-toggle="tab" 
   #elem (click)="testLocationAct(elem.href, 'IDB' + contadorObjet.name)" >

---

    testLocation1():string{
      //alert(document.activeElement.toString().split(/#(.+)?/)[1]);
      return document.activeElement.toString().split(/#(.+)?/)[1];
    }

    testLocationAct(test: any, test1: any){

      document.getElementById(test1).classList.remove('active');
      document.activeElement = test;
    }

更新:

你能在这里添加一个 Plunker 吗？我正在尝试侧边栏数据切换，但它不起作用。- Gary

Plunker

之前它对我想要的东西很好用，发布后我做了一些更改，现在工作得更好了（我想）。

<div class="container" *ngFor="#contadorObjeto of contadorObjetos ; #contadorObjetoI = index" nginit="test='#' id=10">

              <ul class="nav nav-tabs">
                <li class="nav active" [id]="'IDA' + contadorObjeto.name" ([class.active])="testLocation1() == ('A' + contadorObjeto.name) || '10'">        <a [attr.href]="'#A' + contadorObjeto.name" data-toggle="tab"> Info </a></li>
                <li class="nav"        [id]="'IDB' + contadorObjeto.name" ([class.active])="testLocation1() == 'B' + contadorObjeto.name">                  <a [attr.href]="'#B' + contadorObjeto.name" data-toggle="tab"> Info </a></li>
                <li class="nav"        [id]="'IDC' + contadorObjeto.name" ([class.active])="testLocation1() == 'C' + contadorObjeto.name">                  <a [attr.href]="'#C' + contadorObjeto.name" data-toggle="tab"> Info </a></li>
              </ul>

              <div class="tab-content">

                <div class="tab-pane fade in active" [id]="'A' + contadorObjeto.name">Content inside tab A
                  {{ contadorObjeto.name }}
                </div>

                <div class="tab-pane fade in " [id]="'B' + contadorObjeto.name">Content inside tab B 
                  <a [attr.href]="'#C' + contadorObjeto.name" data-toggle="tab" #elem (click)="testLocationAct(elem.href, 'IDB' + contadorObjeto.name)" >
                      <img class="img-responsive"
                      height = "230" width = "230"
                      src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/200px-Free_logo.svg.png" />
                  </a>
                </div>

                <div class="tab-pane fade in " [id]="'C' + contadorObjeto.name">Content inside tab C 
                </div>
              </div>    

            </div>

---

    testLocation1():string{
      //alert(document.activeElement.toString().split(/#(.+)?/)[1]);
      return document.activeElement.toString().split(/#(.+)?/)[1];
    }

    testLocationAct(test: any, test1: any){

      liNavID = "ID" + test.toString().split(/#(.+)?/)[1];

      document.getElementById(test1).classList.remove('active');
      document.getElementById(liNavID).classList.add('active');

      //console.log(liNavID);
    }

我已经调整了示例代码，新的代码使它看起来与之前相似。您可以点击选项卡 2 内部的图像进行测试。

希望能帮到你。

- Angel Angel

---

你能在这里加入一个 plunker 吗？我正在尝试侧边栏数据切换，但似乎无法正常工作。 - Gary

@Gary，你可以在 Plunker 上观看更新，希望可以帮到你。 - Angel Angel

谢谢。这应该会有所帮助。 - Gary

我在导航折叠中使用了id而没有使用[id]，并且使用了href而没有使用[attr.href]，这样做起来很顺利。但是对于包含[]括号的模板，它会出现解析错误。谢谢。 - Gary

Answer 1

我会创建一个包含所有导航元素的数组。导航元素将具有一个active属性。

您可以使用循环创建导航元素：

<ul class="nav nav-tabs">
  <li *ngFor="#tab of tabs" class="nav active"
      [ngClass]="{active:tab.active}">
    <a> Info </a></li>
</ul>

当你点击导航时，将执行这个方法。

selectNav(nav) {
  this.navs.forEach((nav) => {
    nav.active = false;
  });
  nav.active = true;
}

这种方法将与导航元素链接起来，如下所示：

<ul class="nav nav-tabs">
  <li ngFor="#tab of tabs" (...)>
    <a (click)="selectNav(nav)>
      Info
    </a>
  </li>
</ul>

我认为这篇文章能够帮助你：

• 在Angular 2中开发标签组件-http://blog.thoughtram.io/angular/2015/04/09/developing-a-tabs-component-in-angular-2.html

- Thierry Templier

---

答案有点不清楚 :( 这可能有效，但很难理解 - Charitha Goonewardena

Answer 2

您可以按照以下方式操作（将"cObj == 'A'"更改为您需要的内容）：

<li class="nav" [class.active]="cObj == 'A'"> <a [attr.href]="'#A' + cObj"> Info </a></li>
<li class="nav" [class.active]="cObj == 'B'"> <a [attr.href]="'#B' + cObj"> Info </a></li>

- Sasxa

Answer 3

如果使用路由器，请设置 .router-link-active 类。

//our root app component
import {Component} from 'angular2/core'
import {RouteConfig, ROUTER_DIRECTIVES} from "angular2/router";

@Component({
  template: "<h1>First component</h1>"
})
export class FirstComponent { }



@Component({
  template: "<h1>Second component</h1>"
})
export class SecondComponent { }



@Component({
  template: "<h1>Third component</h1>"
})
export class ThirdComponent { }



@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
    <ul>
      <li>
        <a [routerLink]="['First']">First</a>
      </li>
      <li>
        <a [routerLink]="['Second']">Second</a>
      </li>
      <li>
        <a [routerLink]="['Third']">Third</a>
      </li>
    </ul>
    </div>
    <router-outlet></router-outlet>
  `,
  styles: [".router-link-active { background-color: red; }"],
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    { path: "/first", name: "First", component: FirstComponent, useAsDefault: true },
  { path: "/second", name: "Second", component: SecondComponent },
  { path: "/third", name: "Third", component: ThirdComponent }
])
export class AppComponent { }

完整代码：https://github.com/guyoung/GyPractice-Angular2Advanced/tree/master/apps/router_link_active

- guyoung

---

好的解决方案。谢谢！ - micronyks

Answer 4

您不能动态构建属性名称。请改用ngClass。

<li ngClass="{'active': isActive}">

另请参阅：
- https://angular.io/docs/ts/latest/api/common/NgClass-directive.html
- https://dev59.com/mV0a5IYBdhLWcg3wdYmO#33713824

- Günter Zöchbauer

Answer 5

constructor() { }
  tab: number;
  ngOnInit() {
    this.tab = 1;
  }

  selectTab(id){
    this.tab = id;
  }

  activeTab(num){
    return this.tab === num;
  }

<ul class="clearfix">
  <li (click)="selectTab(1)" [ngClass]="{active: activeTab(1)}"> 
    <span>Messages</span>
  </li>

  <li (click)="selectTab(2)" [ngClass]="{active: activeTab(2)}">  
    <span>Profile</span>
  </li>

  <li (click)="selectTab(3)" [ngClass]="{active: activeTab(3)}">  
    <span>Activity</span>
  </li>

 </ul>
 <div class="tab-content">
   <div class="animated fadeIn" *ngIf="tab === 1">
     Content 1
   </div>
   <div class="animated fadeIn" *ngIf="tab === 2">
     Content 2
   </div>
   <div class="animated fadeIn" *ngIf="tab === 3"  >
     Content 3
   </div>
</div>

- Akshata Seetharam

---

你应该解释一下为什么这样做。请确保代码片段实际可用，否则请将其格式化为_code_。 - Jan B.