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

我曾与下面的代码解决了这个问题。我做了两个更改，一个是用mat-修改了md，而不是#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>