Как активировать или нет (вкладка nav) Bootstrap Twitter (Angular 2)

Question

У меня есть nav, 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 " так, но я не могу, ничего, чтобы помочь мне.

Я хотел бы иметь возможность активировать и деактивировать вкладку, переход от одного к другому, я прошу прощения за мой плохой английский, я надеюсь, вы понимаете мой вопрос

---

UPDATE: Я m решена с использованием следующего.

Возможно, ответ от пользователей помочь другим лучше:

• 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 будет иметь активное свойство.

You навигационные элементы будут созданы с помощью цикла:

<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