Dans Angular, comment déterminez-vous l'itinéraire actif?

REMARQUE: Il existe de nombreuses réponses différentes ici, et la plupart ont été valides à un moment ou à un autre. Le fait est que ce qui fonctionne a changé un certain nombre de fois lorsque l'équipe Angular a changé son routeur. La version Router 3.0 qui sera finalement le routeur dans Angular casse bon nombre de ces solutions, mais offre une solution très simple qui lui est propre. Depuis RC.3, la solution préférée est d'utiliser [routerLinkActive]comme indiqué dans cette réponse .

Dans une application angulaire (actuelle dans la version 2.0.0-beta.0 au moment où j'écris ceci), comment déterminez-vous la route actuellement active?

Je travaille sur une application qui utilise Bootstrap 4 et j'ai besoin d'un moyen de marquer les liens / boutons de navigation comme actifs lorsque leur composant associé est affiché dans une <router-output>balise.

Je me rends compte que je pourrais maintenir l'état moi-même lorsque l'un des boutons est cliqué, mais cela ne couvrirait pas le cas d'avoir plusieurs chemins dans le même itinéraire (disons un menu de navigation principal ainsi qu'un menu local dans le composant principal ).

Toutes suggestions ou liens seraient appréciés. Merci.

Avec le nouveau routeur angulaire , vous pouvez ajouter un [routerLinkActive]="['your-class-name']"attribut à tous vos liens:

<a [routerLink]="['/home']" [routerLinkActive]="['is-active']">Home</a>

Ou le format non tableau simplifié si une seule classe est nécessaire:

<a [routerLink]="['/home']" [routerLinkActive]="'is-active'">Home</a>

Ou un format encore plus simple si une seule classe est nécessaire:

<a [routerLink]="['/home']" routerLinkActive="is-active">Home</a>

Voir la directive mal documentéerouterLinkActive pour plus d'informations. (J'ai surtout compris cela par essais et erreurs.)

MISE À JOUR: Une meilleure documentation pour la routerLinkActivedirective peut maintenant être trouvée ici . (Merci à @Victor Hugo Arango A. dans les commentaires ci-dessous.)

J'ai répondu à cela dans une autre question, mais je pense que cela pourrait également être pertinent pour celle-ci. Voici un lien vers la réponse d'origine: Angular 2: Comment déterminer l'itinéraire actif avec des paramètres?

J'ai essayé de définir la classe active sans avoir à savoir exactement quel est l'emplacement actuel (en utilisant le nom de l'itinéraire) . La meilleure solution à laquelle je suis parvenu jusqu'à présent est d'utiliser la fonction isRouteActive disponible dans la Routerclasse.

router.isRouteActive(instruction): Booleanprend un paramètre qui est un Instructionobjet route et renvoie trueou falsesi cette instruction est vraie ou non pour la route actuelle. Vous pouvez générer un itinéraire Instructionà l'aide de Routerla commande generate (linkParams: Array) . LinkParams suit exactement le même format qu'une valeur passée dans une directive routerLink (par exemple router.isRouteActive(router.generate(['/User', { user: user.id }]))).

Voici à quoi pourrait ressembler RouteConfig (je l'ai légèrement modifié pour montrer l'utilisation des paramètres) :

@RouteConfig([
  { path: '/', component: HomePage, name: 'Home' },
  { path: '/signin', component: SignInPage, name: 'SignIn' },
  { path: '/profile/:username/feed', component: FeedPage, name: 'ProfileFeed' },
])

Et la vue ressemblerait à ceci:

<li [class.active]="router.isRouteActive(router.generate(['/Home']))">
   <a [routerLink]="['/Home']">Home</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/SignIn']))">
   <a [routerLink]="['/SignIn']">Sign In</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/ProfileFeed', { username: user.username }]))">
    <a [routerLink]="['/ProfileFeed', { username: user.username }]">Feed</a>
</li>

Jusqu'à présent, cela a été ma solution préférée pour le problème, cela pourrait également vous être utile.

J'ai résolu un problème que j'ai rencontré dans ce lien et je découvre qu'il existe une solution simple à votre question. Vous pouvez utiliser à la router-link-activeplace dans vos styles.

@Component({
   styles: [`.router-link-active { background-color: red; }`]
})
export class NavComponent {
}

Petite amélioration de la réponse @ alex-correia-santos basée sur https://github.com/angular/angular/pull/6407#issuecomment-190179875

import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
// ...
export class App {
  constructor(private router: Router) {
  }

  // ...

  isActive(instruction: any[]): boolean {
    return this.router.isRouteActive(this.router.generate(instruction));
  }
} 

Et utilisez-le comme ceci:

<ul class="nav navbar-nav">
    <li [class.active]="isActive(['Home'])">
        <a [routerLink]="['Home']">Home</a>
    </li>
    <li [class.active]="isActive(['About'])">
        <a [routerLink]="['About']">About</a>
    </li>
</ul>

Vous pouvez vérifier l'itinéraire actuel en injectant l' Locationobjet dans votre contrôleur et en vérifiant lepath() , comme ceci:

class MyController {
    constructor(private location:Location) {}

    ...  location.path(); ...
}

Vous devrez vous assurer de l'importer d'abord:

import {Location} from "angular2/router";

Vous pouvez ensuite utiliser une expression régulière pour faire correspondre le chemin retourné pour voir quel itinéraire est actif. Notez que la Locationclasse renvoie un chemin normalisé quel que soit celui que LocationStrategyvous utilisez. Donc , même si vous utilisez les HashLocationStragegychemins retournés seront toujours de la forme /foo/bar non #/foo/bar

comment déterminez-vous l'itinéraire actuel?

MISE À JOUR: mise à jour selon Angular2.4.x

constructor(route: ActivatedRoute) {
   route.snapshot.params; // active route's params

   route.snapshot.data; // active route's resolved data

   route.snapshot.component; // active route's component

   route.snapshot.queryParams // The query parameters shared by all the routes
}

voir plus ...

Pour marquer les itinéraires actifs routerLinkActivepeuvent être utilisés

<a [routerLink]="/user" routerLinkActive="some class list">User</a>

Cela fonctionne également sur d'autres éléments comme

<div routerLinkActive="some class list">
  <a [routerLink]="/user">User</a>
</div>

Si les correspondances partielles doivent également être marquées, utilisez

routerLinkActive="some class list" [routerLinkActiveOptions]="{ exact: false }"

Pour autant que je sache, ce exact: falsesera la valeur par défaut dans RC.4

En ce moment, j'utilise rc.4 avec bootstrap 4 et celui-ci fonctionne parfaitement pour moi:

 <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:
true}">
    <a class="nav-link" [routerLink]="['']">Home</a>
</li>

Cela fonctionnera pour l'URL: / home

Vous trouverez ci-dessous la méthode utilisant RouteData pour styliser les éléments du menuBar en fonction de l'itinéraire actuel:

RouteConfig comprend des données avec onglet (itinéraire actuel):

@RouteConfig([
  {
    path: '/home',    name: 'Home',    component: HomeComponent,
    data: {activeTab: 'home'},  useAsDefault: true
  }, {
    path: '/jobs',    name: 'Jobs',    data: {activeTab: 'jobs'},
    component: JobsComponent
  }
])

Un morceau de mise en page:

  <li role="presentation" [ngClass]="{active: isActive('home')}">
    <a [routerLink]="['Home']">Home</a>
  </li>
  <li role="presentation" [ngClass]="{active: isActive('jobs')}">
    <a [routerLink]="['Jobs']">Jobs</a>
  </li>

Classe:

export class MainMenuComponent {
  router: Router;

  constructor(data: Router) {
    this.router = data;
  }

  isActive(tab): boolean {
    if (this.router.currentInstruction && this.router.currentInstruction.component.routeData) {
      return tab == this.router.currentInstruction.component.routeData.data['activeTab'];
    }
    return false;
  }
}

Je pensais simplement ajouter un exemple qui n'utilise aucun dactylographe:

<input type="hidden" [routerLink]="'home'" routerLinkActive #home="routerLinkActive" />
<section *ngIf="home.isActive"></section>

La routerLinkActivevariable est liée à une variable de modèle, puis réutilisée selon les besoins. Malheureusement, la seule mise en garde est que vous ne pouvez pas tout avoir sur l' <section>élément car cela #homedoit être résolu avant que l'analyseur ne frappe <section>.

Routerdans Angular 2 RC ne définit plus isRouteActiveet les generateméthodes.

urlTree - Renvoie l'arborescence des URL actuelle.

createUrlTree(commands: any[], segment?: RouteSegment) - Applique un tableau de commandes à l'arborescence d'url actuelle et crée une nouvelle arborescence d'url.

Essayez de suivre

<li 
[class.active]=
"router.urlTree.contains(router.createUrlTree(['/SignIn', this.routeSegment]))">

notice, routeSegment : RouteSegmentdoit être injecté dans le constructeur du composant.

Voici un exemple complet pour ajouter un style d'itinéraire actif dans la version angulaire 2.0.0-rc.1qui prend en compte les chemins racine nuls (par exemple path: '/')

app.component.ts -> Itinéraires

import { Component, OnInit } from '@angular/core';
import { Routes, Router, ROUTER_DIRECTIVES } from '@angular/router';
import { LoginPage, AddCandidatePage } from './export';
import {UserService} from './SERVICES/user.service';

@Component({
  moduleId: 'app/',
  selector: 'my-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  providers: [UserService],
  directives: [ROUTER_DIRECTIVES]
})

@Routes([
  { path: '/', component: AddCandidatePage },
  { path: 'Login', component: LoginPage }
])
export class AppComponent  { //implements OnInit

  constructor(private router: Router){}

  routeIsActive(routePath: string) {
     let currentRoute = this.router.urlTree.firstChild(this.router.urlTree.root);
     // e.g. 'Login' or null if route is '/'
     let segment = currentRoute == null ? '/' : currentRoute.segment;
     return  segment == routePath;
  }
}

app.component.html

<ul>
  <li [class.active]="routeIsActive('Login')"><a [routerLink]="['Login']" >Login</a></li>
  <li [class.active]="routeIsActive('/')"><a [routerLink]="['/']" >AddCandidate</a></li>
</ul>
<route-outlet></router-outlet>

Solution pour Angular2 RC 4:

import {containsTree} from '@angular/router/src/url_tree';
import {Router} from '@angular/router';

export function isRouteActive(router: Router, route: string) {
   const currentUrlTree = router.parseUrl(router.url);
   const routeUrlTree = router.createUrlTree([route]);
   return containsTree(currentUrlTree, routeUrlTree, true);
}

Depuis Angular 8, cela fonctionne:

<li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
    <a [routerLink]="['/']">Home</a>
</li>

{ exact: true } s'assure qu'il correspond à l'URL.

en 2020 si vous voulez définir la classe active sur l'élément qui n'a pas de [routerLink] - vous pouvez faire simplement:

<a
  (click)="bookmarks()"
  [class.active]="router.isActive('/string/path/'+you+'/need', false)" // <== you need this one. second argument 'false' - exact: true/false
  routerLinkActive="active"
  [routerLinkActiveOptions]="{ exact: true }"
>
  bookmarks
</a>

Une autre solution de contournement. Beaucoup plus facile dans Angular Router V3 Alpha. en injectant le routeur

import {Router} from "@angular/router";

export class AppComponent{

    constructor(private router : Router){}

    routeIsActive(routePath: string) {
        return this.router.url == routePath;
    }
}

usage

<div *ngIf="routeIsActive('/')"> My content </div>

Dans Angular2 RC2, vous pouvez utiliser cette implémentation simple

<a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a>

cela ajoutera une classe activeà l'élément avec une URL correspondante, en savoir plus ici

Vous trouverez ci-dessous les réponses à cette question pour toutes les versions des versions Angular 2 RC publiées jusqu'à ce jour:

RC4 et RC3 :

Pour appliquer la classe au lien ou l'ancêtre du lien:

<li routerLinkActive="active"><a [routerLink]="['/home']">Home</a></li>

/ home doit être l'URL et non le nom de la route car la propriété name n'existe plus sur Route Object à partir du routeur v3.

Plus d'informations sur la directive routerLinkActive sur ce lien .

Pour appliquer la classe à n'importe quel div basé sur l'itinéraire actuel:

• Injectez le routeur dans le constructeur du composant.
• Utilisateur router.url pour comparaison.

par exemple

<nav [class.transparent]="router.url==('/home')">
</nav>

RC2 et RC1 :

Utilisez une combinaison de router.isRouteActive et class. *. Par exemple, pour appliquer la classe active sur la base de l'itinéraire d'origine.

Le nom et l'URL peuvent tous deux être transmis à router.generate.

 <li [class.active]="router.isRouteActive(router.generate(['Home']))">
    <a [routerLink]="['Home']" >Home</a>
</li>

L'utilisation routerLinkActiveest bonne dans les cas simples, lorsqu'il y a un lien et que vous souhaitez appliquer certaines classes. Mais dans des cas plus complexes où vous n'avez peut-être pas de routerLink ou où vous avez besoin de quelque chose de plus, vous pouvez créer et utiliser un canal :

@Pipe({
    name: "isRouteActive",
    pure: false
})
export class IsRouteActivePipe implements PipeTransform {

    constructor(private router: Router,
                private activatedRoute: ActivatedRoute) {
    }

    transform(route: any[], options?: { queryParams?: any[], fragment?: any, exact?: boolean }) {
        if (!options) options = {};
        if (options.exact === undefined) options.exact = true;

        const currentUrlTree = this.router.parseUrl(this.router.url);
        const urlTree = this.router.createUrlTree(route, {
            relativeTo: this.activatedRoute,
            queryParams: options.queryParams,
            fragment: options.fragment
        });
        return containsTree(currentUrlTree, urlTree, options.exact);
    }
}

puis:

<div *ngIf="['/some-route'] | isRouteActive">...</div>

et n'oubliez pas d'inclure pipe dans les dépendances de pipes;)

Pour la version angulaire 4+, vous n'avez pas besoin d'utiliser de solution complexe. Vous pouvez simplement utiliser [routerLinkActive]="'is-active'".

Pour un exemple avec bootstrap 4 nav link:

    <ul class="navbar-nav mr-auto">
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/home">Home</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/about-us">About Us</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link " routerLink="/contact-us">Contact</a>
      </li>
    </ul>

Une instance de la classe Router est en fait un observable et renvoie le chemin actuel à chaque fois qu'elle change. Voici comment je le fais:

export class AppComponent implements OnInit { 

currentUrl : string;

constructor(private _router : Router){
    this.currentUrl = ''
}

ngOnInit() {
    this._router.subscribe(
        currentUrl => this.currentUrl = currentUrl,
        error => console.log(error)
    );
}

isCurrentRoute(route : string) : boolean {
    return this.currentUrl === route;
 } 
}

Et puis dans mon HTML:

<a [routerLink]="['Contact']" class="item" [class.active]="isCurrentRoute('contact')">Contact</a>

Comme mentionné dans l'un des commentaires de la réponse acceptée, la routerLinkActivedirective peut également être appliquée à un conteneur de la <a>balise réelle .

Ainsi, par exemple, avec les onglets Twitter Bootstrap où la classe active doit être appliquée à la <li>balise qui contient le lien:

<ul class="nav nav-tabs">
    <li role="presentation" routerLinkActive="active">
        <a routerLink="./location">Location</a>
    </li>
    <li role="presentation" routerLinkActive="active">
        <a routerLink="./execution">Execution</a>
    </li>
</ul>

Génial ! Je suppose que la directive inspecte le contenu de la balise et cherche une <a>balise avec la routerLinkdirective.

Une solution simple pour les utilisateurs angulaires 5 est, il suffit d'ajouter routerLinkActiveà l'élément de liste.

Une routerLinkActivedirective est associée à un itinéraire passant par unrouterLink directive.

Il prend en entrée un tableau de classes qu'il ajoutera à l'élément auquel il est attaché si sa route est actuellement active, comme ceci:

<li class="nav-item"
    [routerLinkActive]="['active']">
  <a class="nav-link"
     [routerLink]="['home']">Home
  </a>
</li>

Ce qui précède ajoutera une classe d'actifs à la balise d'ancrage si nous visualisons actuellement l'itinéraire d'origine.

Et dans la dernière version d'angular, vous pouvez simplement vérifier router.isActive(routeNameAsString). Par exemple, voir l'exemple ci-dessous:

 <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item" [class.active] = "router.isActive('/dashboard')">
        <a class="nav-link" href="#">داشبورد <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item" [class.active] = "router.isActive(route.path)" *ngFor="let route of (routes$ | async)">
        <a class="nav-link" href="javascript:void(0)" *ngIf="route.childRoutes && route.childRoutes.length > 0"
          [matMenuTriggerFor]="menu">{{route.name}}</a>
        <a class="nav-link" href="{{route.path}}"
          *ngIf="!route.childRoutes || route.childRoutes.length === 0">{{route.name}}</a>
        <mat-menu #menu="matMenu">
          <span *ngIf="route.childRoutes && route.childRoutes.length > 0">
            <a *ngFor="let child of route.childRoutes" class="nav-link" href="{{route.path + child.path}}"
              mat-menu-item>{{child.name}}</a>
          </span>
        </mat-menu>
      </li>
    </ul>
    <span class="navbar-text mr-auto">
      <small>سلام</small> {{ (currentUser$ | async) ? (currentUser$ | async).firstName : 'کاربر' }}
      {{ (currentUser$ | async) ? (currentUser$ | async).lastName : 'میهمان' }}
    </span>
  </div>

Et assurez-vous de ne pas oublier d'injecter un routeur dans votre composant.

Je cherchais un moyen d'utiliser une navigation de style Twitter Bootstrap avec Angular2, mais j'ai eu du mal à obtenir le active appliquer classe à l'élément parent du lien sélectionné. J'ai trouvé que la solution de @ alex-correia-santos fonctionne parfaitement!

Le composant contenant vos onglets doit importer le routeur et le définir dans son constructeur avant de pouvoir effectuer les appels nécessaires.

Voici une version simplifiée de mon implémentation ...

import {Component} from 'angular2/core';
import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HomeComponent} from './home.component';
import {LoginComponent} from './login.component';
import {FeedComponent} from './feed.component';

@Component({
  selector: 'my-app',
  template: `
    <ul class="nav nav-tabs">
      <li [class.active]="_r.isRouteActive(_r.generate(['Home']))">
        <a [routerLink]="['Home']">Home</a>
      </li>
      <li [class.active]="_r.isRouteActive(_r.generate(['Login']))">
        <a [routerLink]="['Login']">Sign In</a>
      </li>
      <li [class.active]="_r.isRouteActive(_r.generate(['Feed']))">
        <a [routerLink]="['Feed']">Feed</a>
      </li>
    </ul>`,
  styleUrls: ['app/app.component.css'],
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path:'/', component:HomeComponent, name:'Home', useAsDefault:true },
  { path:'/login', component:LoginComponent, name:'Login' },
  { path:'/feed', component:FeedComponent, name:'Feed' }
])
export class AppComponent {
  title = 'My App';
  constructor( private _r:Router ){}
}

disons que vous voulez ajouter du CSS à mon état / onglet actif. Utilisez routerLinkActive pour activer votre lien de routage.

note: «actif» est mon nom de classe ici

<style>
   .active{
       color:blue;
     }
</style>

  <a routerLink="/home" [routerLinkActive]="['active']">Home</a>
  <a routerLink="/about" [routerLinkActive]="['active']">About</a>
  <a routerLink="/contact" [routerLinkActive]="['active']">Contact</a>

J'utilise un routeur angulaire ^3.4.7et j'ai toujours des problèmes avec la routerLinkActivedirective.

Cela ne fonctionne pas si vous disposez de plusieurs liens avec la même URL et qu'il ne semble pas être actualisé tout le temps.

Inspiré par la réponse de @tomaszbak, j'ai créé un petit composant pour faire le travail

Le modèle HTML pur est comme

 <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
 <a [routerLink]="['/about']" routerLinkActive="active">About us</a>
 <a [routerLink]="['/contact']" routerLinkActive="active">Contacts</a>

commencez par importer RouterLinkActive dans votre .ts

importer {RouterLinkActive} depuis '@ angular / router';

Utilisez maintenant RouterLinkActive dans votre code HTML

<span class="" routerLink ="/some_path" routerLinkActive="class_Name">Value</span></a>

fournir quelques css à la classe "class_Name", car lorsque ce lien sera actif / cliqué, vous trouverez cette classe sur span lors de l'inspection.

Une manière programmatique serait de le faire dans le composant lui-même. J'ai lutté trois semaines sur ce problème, mais j'ai abandonné les documents angulaires et j'ai lu le code réel qui a fait fonctionner routerlinkactive et c'est à propos des meilleurs documents que je puisse trouver.

    import {
  Component,AfterContentInit,OnDestroy, ViewChild,OnInit, ViewChildren, AfterViewInit, ElementRef, Renderer2, QueryList,NgZone,ApplicationRef
}
  from '@angular/core';
  import { Location } from '@angular/common';

import { Subscription } from 'rxjs';
import {
  ActivatedRoute,ResolveStart,Event, Router,RouterEvent, NavigationEnd, UrlSegment
} from '@angular/router';
import { Observable } from "rxjs";
import * as $ from 'jquery';
import { pairwise, map } from 'rxjs/operators';
import { filter } from 'rxjs/operators';
import {PageHandleService} from '../pageHandling.service'
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})




export class HeaderComponent implements AfterContentInit,AfterViewInit,OnInit,OnDestroy{

    public previousUrl: any;
    private subscription: Subscription;


      @ViewChild("superclass", { static: false } as any) superclass: ElementRef;
      @ViewChildren("megaclass") megaclass: QueryList<ElementRef>;


  constructor( private element: ElementRef, private renderer: Renderer2, private router: Router, private activatedRoute: ActivatedRoute, private location: Location, private pageHandleService: PageHandleService){
    this.subscription = router.events.subscribe((s: Event) => {
      if (s instanceof NavigationEnd) {
        this.update();
      }
    });


  }


  ngOnInit(){

  }


  ngAfterViewInit() {
  }

  ngAfterContentInit(){
  }



private update(): void {
  if (!this.router.navigated || !this.superclass) return;
      Promise.resolve().then(() => {
        this.previousUrl = this.router.url

        this.megaclass.toArray().forEach( (superclass) => {

          var superclass = superclass
          console.log( superclass.nativeElement.children[0].classList )
          console.log( superclass.nativeElement.children )

          if (this.previousUrl == superclass.nativeElement.getAttribute("routerLink")) {
            this.renderer.addClass(superclass.nativeElement.children[0], "box")
            console.log("add class")

          } else {
            this.renderer.removeClass(superclass.nativeElement.children[0], "box")
            console.log("remove class")
          }

        });
})
//update is done
}
ngOnDestroy(): void { this.subscription.unsubscribe(); }


//class is done
}

Remarque :
Pour la manière programmatique, assurez-vous d'ajouter le routeur-lien et il faut un élément enfant. Si vous voulez changer cela, vous devez vous débarrasser des enfants superclass.nativeElement.