Блог

Я использую mat-tab-navbar для навигации по приложениям с лениво загруженными модулями. Я пытался использовать RouterLinkActive, но не могу переключить состояние вкладки на активное при нажатии. Пожалуйста, посмотрите на скриншот ниже.

navbar.component.html

 <nav mat-tab-nav-bar fxHide.xs>
    <a mat-tab-link *ngFor="let link of navLinks" routerLink="{{ link.location }}" routerLinkActive
        #rla="routerLinkActive" [active]="rla.isActive">
        <span>{{ link.label | uppercase }}</span>
    </a>
</nav>
  

Скриншот результата

Попробуйте это:

 <nav mat-tab-nav-bar fxHide.xs>
    <a mat-tab-link *ngFor="let link of navLinks" routerLink="{{ link.location }}" [active]="routerLinkActive">
        <span>{{ link.label | uppercase }}</span>
    </a>
</nav>  

Вместо этого вы могли бы импортировать компонент в mat-tab следующим образом:

   <mat-tab>
    <ng-template mat-tab-label>
      <label>Example</label>
    </ng-template>
    <app-example></app-example>
  </mat-tab>
  

Спасибо за ответ. Я понял это, и это работает!

navbar.component.html

     <nav mat-tab-nav-bar mat-align-tabs="center">
    <a mat-tab-link *ngFor="let link of navLinks" routerLink="{{ link.location }}"
        (click)="activelink=link.location" [active]="activelink==link.location">
        <span>{{ link.label | uppercase }}</span>
    </a>
</nav>
  

navbar.component.ts

   activelink = '';