0
votes

impossible de basculer les onglets sur actif avec routerLinkActive dans mat-tab-navbar

J'utilise mat-tab-navbar pour la navigation dans les applications avec des modules chargés paresseusement. J'ai essayé d'utiliser RouterLinkActive mais je ne peux pas changer l'état de l'onglet en actif lorsque vous cliquez dessus. Veuillez regarder la capture d'écran ci-dessous.

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>

Capture d'écran du résultat

angular angular-material

0 commentaires

3 Réponses :

0
votes

Essaye ça:

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

0 commentaires

0
votes

Vous pouvez à la place importer le composant dans l'onglet du tapis comme ceci:

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

0 commentaires

0
votes

Merci pour la réponse. Je l'ai compris et ça marche!

navbar.component.html

  activelink = '';

navbar.component.ts

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

0 commentaires