탐색 막대에 대한 링크가있는 버튼 만들기 Angular2 Material-Design-bootstrap

Question

저는 자바와 각도 2를 배우고 있습니다. 프런트 엔드에 재료 디자인 부트 스트랩 (http://fezvrasta.github.io/bootstrap-material-design/)을 사용하는 nav가 있습니다. 나는 탐색 알약을 가지고

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

기본적으로 그 코드는, 문제는 내가 다음 탭 documentos에 데려다 탭 formulario 아래에 버튼을 넣어 시도하고 있지만이 href=#documentos에 새 단추를 넣을 때가요 그것은 나를 documentos 탭으로 데려가지만 활성화되지 않은 탭 docuemntos을 가지고 있지 않습니다 (탭 documentos 여전히 활성).

불쌍한 영어로 죄송합니다. 저를 도울 수 있기를 바랍니다.

Answer 1

아마 당신은이를 시도해야한다 :이 예 나는이 당신을 도움이되기를 바랍니다

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

사장님 Learning Angular 2: Conditionally add styles to an element

뭔가를.

편집.

또는이 예와 같이 ang-cli에 javascript 파일을 추가하면됩니다. Global Library Installation