角度材料2標簽

Question

我正在寫一個角度應用程序，我想要Angular Material Tabs進行導航。 我的問題是當我點擊一個標簽時，它實際上在路線之間切換但是標簽中的樣式沒有變化，所以看起來活動標簽仍然是另一個。

我的代碼：

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

現場演示

Answer 2

我用下面的代碼解決了這個問題。 我做了兩個更改，一個是修改md-用mat-而不是#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>