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


312

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.

Réponses:


356

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


4
Est-il possible de l'activer lorsque les enfants de l'itinéraire sont actifs? Le code a une @inputoption for, mais exact: falseactive la classe chaque fois que les frères et sœurs de l'itinéraire actuel sont également actifs.
Matej

1
@ GabrieleB-David Je ne l'ai pas testé, mais je suppose que router.navigate()cela fonctionnerait très bien. routerLinkActiveest simplement un indicateur indiquant si ce lien représente l'itinéraire actif.
jessepinho

7
Dans l'exemple donné, [routerLinkActive] est ajouté à la balise <a />, cependant, il peut également être placé sur d'autres éléments si la classe est requise ailleurs. <ul> <li [routerLinkActive] = "[ 'actif']"> <a [routerLink]="[myRoute.Route]">
Oblivion2000

2
@jessepinho - J'ai essayé - [routerLinkActive] = "'active'" ne fonctionnera que si vous avez également [routerLink] dans la balise a. Si vous aviez (click) = "navitageTo ('/ route')" au lieu de [routerLink], et dans cette fonction, vous avez appelé this.router.navigate (route), le nouveau composant se chargera mais votre classe CSS active aura gagné ' t être appliqué. J'essaie de faire autre chose dans cette fonction en plus de this.router.navigate (..).
Mickael Caruso

2
L'exemple dans la documentation officielle pourrait vous aider: angular.io/docs/ts/latest/api/router/index/…
Victor Hugo Arango A.

69

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.


1
Je pense que cette solution est meilleure que celle acceptée car elle utilise des API angulaires au lieu de regex correspondant au chemin. C'est quand même un peu moche, ce serait bien de pouvoir le faire router.isRouteActive('Home').
Philip

2
J'ai rencontré des problèmes en essayant d'implémenter la solution, alors peut-être que certains peuvent être utiles: stackoverflow.com/questions/35882998/…
Nikita Vlasenko

5
ne devrait pas oublier de mettre Routerdans le constructeur de la classe
Nikita Vlasenko

2
Dans la dernière version d'Angular 2, j'ai utilisé nameplutôt que asdans l'objet de configuration du routeur.
ComFreek

9
Cela peut être utilisé dans rc1 à la place:router.urlTree.contains(router.createUrlTree(['Home']))
František Žiačik

35

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

2
Je pense que cela devrait être la réponse acceptée. Le routeur d'Angular2 l'ajoutera automatiquement pour vous.
Gabu

2
malheureusement, cette classe s'ajoute <a>, pas le <li>
laifjei

malheureusement, cela ne fonctionne pas vraiment bien. j'ai un menu généré dynamiquement et la router-link-activeclasse n'est pas ajoutée à l'actif aou li. mais il y a un endroit où j'utilise bootstrap nav-tabset cela fonctionne là-bas.
Shri

33

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>

et un style dans le composant styles : [.active {background-color: aliceblue; } ]. +1 ça marche
Pratik Kelwalkar

Excellente solution, avec cela, vous pouvez rendre le routeur privé.
Kelvin Dealca

C'est une bien meilleure solution et est particulièrement utile pour un noob qui oublie de petites choses comme créer le constructeur et passer le routeur! Vous méritez totalement le chèque.
Méthodicien

30

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


17

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


14

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


11

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


Quel est le but de l'option exacte? Est-ce que cela ne correspond pas aux sous-chemins comme /home/whatever?
Michael Oryl

oui, exactveux dire, cette route aura le même nom. Et cela est nécessaire si vous prévoyez de l'utiliser avec des outils comme Twitter Bootstrap. Il gère déjà l'état du lien actif et sans exactoption ne fonctionnera pas. (Je ne sais pas comment ça fonctionne en core, je l'ai essayé et ça marche pour moi)
Artem Zinoviev

7

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

7

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


Solution parfaite pour appliquer des conditions sur des routes actives. Où @ angulaire / routeur ou autre n'a pas fonctionné.
Rohit Parte

Wow, c'est tellement utile. Merci!
Yulian

6

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.


6

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>

6

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);
}

5

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.


5

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>

Merci, Igor. C'est la meilleure solution.
Dmitry Grinko

Merci pour vos commentaires :)
Kurkov Igor

4

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>

dès que je l'importe, j'obtiens une propriété Impossible de lire «isSkipSelf» d'erreur nulle. des idées?
atsituab

4

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


4

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>

4

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


Belle idée mais dans angular2.0.0rc3 je change this.router.isRouteActive ... en this._location.path () et je mets en haut ceci: import {Location} de '@ angular / common';
Kamil Kiełczewski

2
Il semble qu'il manque quelque chose dans le code. Où est containsTreedéfini?
Øystein Amundsen

4

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>

3

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>

1
.subscribe non disponible sur l'instance de routeur.
Shivang Gupta

3

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.


2

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.

Démo


2

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.


1

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 ){}
}

1

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>

0

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


0

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>

0

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.


0

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.