角材2タブ

Question

角形のアプリを書いていますが、角型のタブを使ってナビゲーションしたいと思います。私が問題にしているのは、タブをクリックすると実際にはルート間で切り替わるが、タブではスタイリングの変更はないので、アクティブなタブはまだ別のものだと思われる。

マイコード：

<nav md-tab-nav-bar> 
    <a md-tab-link 
    [routerLink]="['/page1']" 
    routerLinkActive #rla="routerLinkActive" 
    [active]="rla.isActive"> 
    Page1 
    </a> 
    <a md-tab-link 
    [routerLink]="['/page2']" 
    routerLinkActive #rla="routerLinkActive" 
    [active]="rla.isActive"> 
    Page2 
    </a> 
</nav> 

<router-outlet></router-outlet> 

Answer 1

あなたは、私は以下のコードでこれを修正して、タブにアクティブクラスを設定する

<nav md-tab-nav-bar> 
    <a md-tab-link 
    [routerLink]="['/page1']" (click)="activeLinkIndex = 1" 
    routerLinkActive #rla="routerLinkActive" 
    [active]="activeLinkIndex === 1"> 
    Page1 
    </a> 
    <a md-tab-link 
    [routerLink]="['/page2']" (click)="activeLinkIndex = 2" 
    routerLinkActive #rla="routerLinkActive" 
    [active]="activeLinkIndex === 2"> 
    Page2 
    </a> 
</nav> 

LIVE DEMO

Answer 2

をインデックスを使用する必要があります。私は2つの変更を行いました.1つはmd-とmat-で変更され、#rlaの代わりに＃rla1 &＃rla2が使用されました。

<nav mat-tab-nav-bar> 
    <a mat-tab-link 
    [routerLink]="['/page1']" 
    routerLinkActive #rla1="routerLinkActive" 
    [active]="rla1.isActive"> 
    Page1 
    </a> 
    <a mat-tab-link 
    [routerLink]="['/page2']" 
    routerLinkActive #rla2="routerLinkActive" 
    [active]="rla2.isActive"> 
    Page 
    </a> 
</nav> 

<router-outlet></router-outlet>