Comment ajouter une classe active au lien qui a un fragment en angulaire?

En angular, nous ajoutons une routerLinkActivedirective pour ajouter une classe css (disons une classe active) au lien. Cette directive ajoutera une classe active au lien particulier lorsqu'il est actif. Mais les fragments ne seront pas comptés pour ce scénario.

Pour rectifier ce problème, si vous utilisez la version 7.2.4 du routeur, nous pouvons résoudre facilement avec le code suivant [routerLinkActiveOptions]="{ exact: true }"

Ensuite, le code d'origine ressemblera à celui ci-dessous:

<div class="sidenav-container">
  <div class="list">
    <mat-list role="list">
      <mat-list-item role="listitem"
        ><a
          routerLink="./"
          fragment="report"
          routerLinkActive="active"
          [routerLinkActiveOptions]="{ exact: true }"
          >1. Report</a
        ></mat-list-item
      >
      <mat-list-item role="listitem"
        ><a
          routerLink="./"
          routerLinkActive="active"
          fragment="profile"
          [routerLinkActiveOptions]="{ exact: true }"
          >2. Profile</a
        >
      </mat-list-item>
    </mat-list>
  </div>
</div>

Si la version du routeur est inférieure à 7.2.4, nous devons utiliser l'approche ci-dessous pour résoudre ce problème.

Injecter ActivatedRoutele componnet

le code ressemblera à ceci:

import { ActivatedRoute } from '@angular/router';
import { share } from 'rxjs/operators';

activeFragment = this.route.fragment.pipe(share());
constructor(public route: ActivatedRoute) {}

Ensuite, nous devons ajouter la classe ci-dessous au modèle HTML.

[class.active]="(activeFragment | async) === 'report'"

Le code complet en HTML ressemblera à ce qui suit:

<div class="sidenav-container">
  <div class="list">
    <mat-list role="list">
      <mat-list-item role="listitem"
        ><a
          routerLink="./"
          fragment="report"
          [class.active]="(activeFragment | async) === 'report'"
          >1. Report</a
        ></mat-list-item
      >
      <mat-list-item role="listitem"
        ><a
          routerLink="./"
          fragment="profile"
          [class.active]="(activeFragment | async) === 'profile'"
          >2. Profile</a
        >
      </mat-list-item>
    </mat-list>
  </div>
</div>