如何激活或不（導航選項卡）Bootstrap Twitter（Angular 2）

Question

我有一個導航，Twitter Bootstrap，其中一個標籤(#B ..)，我有一個圖像，點擊它改變到另一個標籤(#C ..)。

我可以更改該選項卡，但我不能，新選項卡(#C ..)設置爲活動。並且此圖片選項卡(#B ..)設置爲停用。 （例如removeClass活動）

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

UPDATE：

你能添加一個蹲下來這個。我想一個側欄的數據切換和 它是不工作的加里 -

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); 
    } 

我已經適應了樣品，新的代碼，以使它看起來類似於previous.You可以在圖像上單擊該選項卡2的內部測試。

我希望能幫到你。

Answer 1

您不能有動態構建的屬性名稱。使用ngClass代替

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

參見：
- https://angular.io/docs/ts/latest/api/common/NgClass-directive.html
- https://stackoverflow.com/a/33713824/217408

Answer 2

我會創建一個包含所有的導航元素的數組。 nav元素將具有活動屬性。

您導航元素將與循環創建：

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

這個方法將被鏈接到NAV這樣的內容：

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

我認爲這篇文章可以幫到你：

• 開發一個標籤組件在角2 - http://blog.thoughtram.io/angular/2015/04/09/developing-a-tabs-component-in-angular-2.html

Answer 3

你可以做這樣的（改變"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> 

Answer 4

如果使用路由器，集.router-鏈路活動類

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