J'ai lu cette question sur la façon de déterminer l'actif itinéraire, mais je ne sais toujours pas comment déterminer un itinéraire actif avec des paramètres?

En ce moment, je le fais comme ça:

<a [routerLink]="['/Profile/Feed', {username: username}]"
   [ngClass]="{active: getLinkStyle('/profile/john_doe/feed')}">
   Feed for {{username}}
</a>

Et à l'intérieur de mon composant:

getLinkStyle(path:string):boolean {
  console.log(this._location.path()); // logs: '/profile/john_doe/feed'
  return this._location.path() === path;
}

Et cela fonctionnera car je passe le nom d'utilisateur sous forme de chaîne. Y a-t-il un moyen de faire cela en passant le paramètre correct?

15
Aico Klein Ovink 3 janv. 2016 à 01:48

5 réponses

Meilleure réponse

Vérifiez simplement la classe router-link-active définie automatiquement sur l'élément a.

8
iuristona 27 janv. 2016 à 19:39

Avec le nouveau routeur Angular 2 à venir (à l'adresse version 3.0-alpha.7 au moment où j'écris this), c'est très simple.

Tout ce que vous avez à faire est d'utiliser la directive [routerLinkActive] dans votre lien.

<a [routerLinkActive]="['active']" [routerLink]="['/contact',  contact.id ]">
    {{contact.name}}
</a>

C'est ce que vous utiliserez lorsque Angular 2 sera publié pour de vrai, et non plus une version candidate. J'utilise l'alpha du routeur maintenant et je n'ai aucun problème.

Voici la démonstration de Plunk. Vous pouvez voir que les liens deviennent rouges lorsque vous cliquez dessus. C'est la directive qui leur attribue la classe active. Vous pouvez bien sûr utiliser n'importe quel nom de classe de votre choix.

19
Michael Oryl 25 juin 2016 à 01:17

Vous pouvez utiliser le nouveau service de localisation du package commun Angular2: https://angular.io/docs/js/latest/api/router/Location-class.html#!#path-anchor

import { Location } from '@angular/common';

...

export class YourClass {
    constructor(private _loc:Location) {}

    getCurrentPath() {
        return this._loc.path();
    }
}

Remarque: il est préférable d'utiliser le service Routeur pour déclencher des changements d'itinéraire. N'utilisez Location que si vous devez interagir avec ou créer des URL normalisées en dehors du routage.

Remarque: la documentation indique l'importation depuis router, mais la dernière version de betta dont je dispose dispose de Location services dans common.

1
Brian 9 juin 2016 à 16:54

Essaye ça :

<li   class="ann_profileimg" [routerLinkActive]="['active']" [routerLink]="['profile']">
            <div class="ann_header_menu_left ann_profile_avatar_small"></div>
            <span>Vishnu </span>
          </li>
1
VISHNU Radhakrishnan 23 oct. 2017 à 12:37

Pour Angular version 4+, la détermination d'une route active dans le modèle est assez facile car il existe une directive intégrée à cet effet, le nom routerLinkActive que vous pouvez utiliser de la manière suivante:

      <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 title="Contact Us" class="nav-link " routerLink="/contact-us">Contact</a>
      </li>
    </ul>
0
asmmahmud 11 oct. 2017 à 10:23