Angular Material 2 Tabs

Question

Ich schreibe eine eckige App und ich möchte Angular Material Tabs für die Navigation. Das Problem, dass ich bin, ist, dass, wenn ich in einen Tab klicke, es tatsächlich zwischen den Routen wechselt, aber es gibt keine Änderung beim Stylen in den Tabs, so scheint der aktive Tab immer noch der andere zu sein.

Mein Code:

<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

Sie Index verwendet werden sollen, die aktive Klasse auf die Registerkarte zu setzen,

<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

Ich habe dies mit folgendem Code festgelegt. Zwei Änderungen habe ich gemacht, eine ist geändert md- mit Mat- und anstelle von #rla habe ich # rla1 & # rla2 verwendet.

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