angular - Angular Material 2个标签

我正在编写一个有角度的应用程序，我想在“ Angular Material”选项卡中进行导航。我的问题是，当我单击一个选项卡时，它实际上在路线之间切换，但是选项卡中的样式没有变化，因此看来活动的选项卡仍然是另一个。

我的代码：

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

最佳答案

您应该使用索引将活动类设置为标签，

<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