angular2はアクティブなタブを初期化する

Question

angular2のタブにアクティブなクラスを設定しようとしています。私はタブにng2-bootstrapプラグインを使用しており、実際にそれを行う方法を理解していません。 NG2-ブートストラップの元の例から

：私は負荷にアクティブとして最後のタブを設定したい場合は

<tabset> 
    <tab heading="Static title">Static content</tab> 
    <tab *ngFor="let tabz of tabs" 
     [heading]="tabz.title" 
     [active]="tabz.active" 
     (select)="tabz.active = true" 
     (deselect)="tabz.active = false" 
     [disabled]="tabz.disabled" 
     [removable]="tabz.removable" 
     (removed)="removeTabHandler(tabz)"> 
     {{tabz?.content}} 
    </tab> 
    <tab (select)="alertMe()"> 
     <template tabHeading> 
     <i class="glyphicon glyphicon-bell"></i> Alert! 
     </template> 
     I've got an HTML heading, and a select callback. Pretty cool! 
    </tab> 
    </tabset> 

だから、どのように私はtypescriptですで、このタブにアクセスすることができますか？主な問題は、私がtypescript自体で作成されたタブにアクセスできるだけで、最初または最後のタブのような静的タブにはアクセスできないことです。

<tab (select)="alertMe()" [ngClass]="{active: last}"> 
     <template tabHeading> 
     <i class="glyphicon glyphicon-bell"></i> Alert! 
     </template> 
     I've got an HTML heading, and a select callback. Pretty cool! 
</tab> 

Answer 1

：

は、私のような何かを達成したいです。その後

<tabset> 
    <tab #headingTab heading="Static title">Static content</tab> 
    ... 

あなたは何をしたいprobabyある性質nativeElementを持ってElementRefを手に入れることができ@ViewChildを使用して： あなたの例では、スタティックタブを取得するには、あなたがこのように彼らにIDを設定する必要があります。

あなたはNG2-ブートストラップから TabsetComponentをインポートする必要があなたのコンポーネントで

：それにアクセスするには

... 
import {TAB_DIRECTIVES, TabsetComponent} from "ng2-bootstrap/ng2-bootstrap"; 
... 

あなたはngAfterViewInit()ライフサイクルフックにフックする必要があるので、あなたはAfterViewInitをインポートし、このようにそれを実装する必要があります。

export class MyComponent implements AfterViewInit { 

    @ViewChild('headingTab')  // id of the tab in your html template 
    private _headingTab:TabsetComponent; // followed by a variable which will hold the component 

    ngAfterViewInit():any { 
     console.log(this._headingTab); 
    } 
} 

これが役に立ちます。

Answer 2

は、最初に、私はあなたが間違って理解し、私は私の答えを更新しました：これを試してみてください

ngOnActivate() { 
    tab[4].activ=true; 
}