2016-11-01 6 views
0

Я просто изучаю java и угловой 2, в моем интерфейсе у меня есть навигатор, который использует материнскую конструкцию bootstrap (http://fezvrasta.github.io/bootstrap-material-design/), на мой взгляд у меня есть нав таблеткуСоздайте кнопку со ссылкой на навигационную панель Angular2 Material-Design-bootstrap

<ul class="nav nav-pills"> 
    <li class="active"><a data-toggle="tab" href="#formulario">Formulario</a> 
    </li> 
    <li><a data-toggle="tab" href="#documentos">Documentos</a> 
    </li> 
    <li><a data-toggle="tab" href="#flujo">Flujo</a> 
    </li> 
</ul> 

<div class="tab-content"> 
    <!--  DOCUMENTOS  --> 
    <div id="formulario" class="tab-pane fade in active"> 
     <!--  Here i have a dynamyc-form take from a json --> 
    </div> 

    <!--  DOCUMENTOS  --> 
    <div id="documentos" class="tab-pane fade"> 
     <!--  fields to upload document --> 
    </div> 

    <!--  FLUJO --> 
    <div id="flujo" class="tab-pane fade"> 
     <!--  just a table with a list of activities --> 
    </div> 
</div> 

в основном это код, проблема я пытаюсь поставить кнопку под вкладкой formulario взять меня к следующей вкладке documentos но когда поставил новую кнопку с href=#documentos он берет меня на вкладку documentos, но у нее нет вкладки docuemntos как активировано (вкладка documentos все еще активна).

Извините, мой плохой английский, надеюсь, вы можете мне помочь.

ответ

0

Может быть, вы должны попробовать это: Learning Angular 2: Conditionally add styles to an element

что-то ЛИК этого примера

@Component({ 
    template: ` 
    <div> 
     <div [class.active]="isActive('new_tab_name')"> 
     New Tab Name 
     </div> 
     <div [class.active]="isActive('tab_name')"> 
     Tab Name 
     </div>   
     <button (click)="setActive('new_tab_name')">Toggle style</button> 
    </div> 
    ` 
}) 
class MyApp { 

    tabName:string = 'tab_name'; 

    setActive(tab) { 
    this.tabName = tab; 
    } 

    isActive(tab) { 
    return this.tabName == tab; 
    } 
} 

Я надеюсь, что это поможет вам.

Редактировать.

Возможно, вам просто нужно добавить файл javascript в angular-cli, как этот пример: Global Library Installation

 Смежные вопросы

  • Нет связанных вопросов^_^