Question

我正在编写一个角度应用程序，我想使用Angular Material Tabs进行导航。我的问题是当我点击一个标签时它实际上在路线之间切换但是标签中的样式没有变化，所以看起来活动标签仍然是另一个。

我的代码：

UILabel

Answer 1

您应该使用index将活动类设置为选项卡

<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

我用以下代码解决了这个问题。我做了两个改变，一个是修改md-用mat-而不是#rla，我使用＃rla1＆amp; ＃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>

角度材料2标签

2 个答案: