首页 文章

角度材料2标签

提问于
浏览
2

我正在写一个角度应用程序,我想要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>

2 回答

  • 2

    您应该使用索引将活动类设置为选项卡,

    <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

  • 5

    我用下面的代码解决了这个问题 . 我做了两个更改,一个是修改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>
    

相关问题