角材料 2 选项卡答案

【问题标题】：Angular Material 2 Tabs角材料 2 选项卡
【发布时间】：2017-05-06 03:34:20
【问题描述】：

我正在编写一个 Angular 应用程序，我想使用 Angular 材质选项卡进行导航。我遇到的问题是，当我点击一个选项卡时，它实际上会在路线之间切换，但选项卡中的样式没有变化，所以似乎活动选项卡仍然是另一个选项卡。

我的代码：

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

【问题讨论】：

标签： angular angular-material2

【解决方案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

【讨论】：

@Igor 因为正在更新材料，我会尽快修复
@Aravind 太棒了！谢谢！

【解决方案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>

【讨论】：

这有帮助。我的问题是在所有 mat-tab-links 中使用 #rla 而不是唯一的。