Comment ajouter une classe active à un lien qui contient un fragment en angular ?

Question

La version d'Angular est 7 et je veux ajouter une classe active au lien cliqué. Ici le lien est une navigation à l'ancienne (routage par ID).

Mon code HTML est le suivant :

<div class="sidenav-container">
  <div class="list">
    <mat-list role="list">
      <mat-list-item role="listitem"
        ><a
          routerLink="./"
          fragment="report"
          >1. Report</a
        ></mat-list-item
      >
      <mat-list-item role="listitem"
        ><a
          routerLink="./"
          fragment="profile"
          >2. Profile</a
        >
      </mat-list-item>
    </mat-list>
  </div>
</div>

Et mon fichier css ressemble à ce qui suit :

.active {
  color: green;
  font-weight: 900;
}

Answer 1

En angulaire, nous ajoutons routerLinkActive pour ajouter une classe css (disons classe active) au lien. Cette directive ajoutera la classe active au lien particulier lorsqu'il est actif. Mais les fragments ne seront pas pris en compte dans ce scénario.

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

Le code original ressemblera alors au code 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 suivante pour résoudre ce problème.

Injecter ActivatedRoute le dans componnet

Le code sera le suivant :

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 comme ci-dessous au modèle HTML.

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

Le code complet en HTML sera le suivant :

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

Answer 2

Une solution pourrait être de conserver l'élément sélectionné et de placer l'entrée de la classe dans l'ancre comme ceci :

<mat-list-item role="listitem"
    ><a
      routerLink="./"
      (click)="selectedAnchor = 'report'"
      [class]="selectedAnchor === 'report' ? 'active' : ''"
      fragment="report"
      >1. Report</a
    ></mat-list-item
  >
  <mat-list-item role="listitem"
    ><a
      routerLink="./"
      (click)="selectedAnchor = 'profile'"
      [class]="selectedAnchor === 'profile' ? 'active' : ''"
      fragment="profile"
      >2. Profile</a
    >
  </mat-list-item>

Et dans le component.ts créez simplement une propriété appelée selectedAnchor = '';