Angulaire: Comment déterminer l'itinéraire actif avec les paramètres?

j'ai lu cette question sur la façon de déterminer la route active , mais il n'est toujours pas clair pour moi comment déterminer une route active avec paramaters?

en ce moment je le fais comme ceci: 

<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 ça va marcher parce que je passe le nom d'utilisateur comme une chaîne. Y a-t-il un moyen de faire cela en passant le bon paramètre??

14
demandé sur Lazar Ljubenović 2016-01-03 01:48:48

7 réponses

vérifiez simplement l'élément router-link-active de la classe à a .

8
répondu iuristona 2016-01-27 19:39:26

avec le nouveau routeur 2 angulaire (à version 3.0-alpha.7 pendant que j'écris ceci), c'est très simple.

Tout ce que vous devez 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 allez utiliser quand Angular 2 est libéré pour de vrai, et n'est plus un candidat de libération. J'utilise l'alpha du routeur maintenant et je n'ai aucun problème.

Gratter en démontrant qu'il . Vous pouvez voir que les liens rouges que vous cliquez sur eux. C'est la directive qui leur attribue la classe active . Vous pouvez utiliser n'importe quel nom de classe de votre choix, bien sûr.

16
répondu Michael Oryl 2016-06-25 01:17:34

en angle 2 rc1 router.isRouteActive n'existe plus. Je n'ai pu trouver de solution de travail nulle part, mais j'ai pu la résoudre comme ceci (la méthode personnalisée isActiveRoute fait l'affaire):

App.composant.ts: 

import { Component } from '@angular/core';
import { Routes, Route, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
import { HomeComponent } from './home.component';
import { P1Component } from './p1.component';

@Component({
    selector: 'app',
    templateUrl: './app/app.template.html',
    directives: [ROUTER_DIRECTIVES]
})

@Routes([
    { path: '/', component: HomeComponent },
    { path: '/p1', component: P1Component }
])

export class AppComponent implements OnInit {

    constructor(public router: Router){ }

    isActiveRoute(route: string) {
        return this.router.serializeUrl(this.router.urlTree) == this.router.serializeUrl((this.router.createUrlTree([route])));
    } 
}

App.modèle.html: 

            <ul class="nav navbar-nav">
                <li [class.active]="isActiveRoute('/')">
                    <a class="nav-link" [routerLink]="['/']">Home</a>
                </li>
                <li [class.active]="isActiveRoute('/p1')">
                    <a class="nav-link" [routerLink]="['/p1']">Page 1</a>
                </li>
6
répondu Mcanic 2016-05-28 15:44:58

j'ai essayé de définir la classe active sans avoir à savoir exactement quel est l'emplacement actuel (en utilisant le nom de route) . C'est la meilleure solution que j'ai obtenu à ce jour.

Voici comment le RouteConfig ressemble à (Je l'ai modifié un peu pour ressembler à ce que vous voulez faire) : 

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

et le View 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>

ceci a été ma solution préférée pour le problème jusqu'à présent, il pourrait être utile pour vous aussi.

5
répondu Alex Santos 2016-01-02 23:51:30

essayez ceci: 

<li   class="ann_profileimg" [routerLinkActive]="['active']" [routerLink]="['profile']">
            <div class="ann_header_menu_left ann_profile_avatar_small"></div>
            <span>Vishnu </span>
          </li>
1
répondu VISHNU Radhakrishnan 2017-10-23 12:37:20

vous pouvez utiliser le service new Location de Angular2 paquet commun: https://angular.io/docs/js/latest/api/router/Location-class.html#!#chemin-ancre 

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

...

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

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

Note: il est préférable d'utiliser le service de routeur pour déclencher des changements de route. Utiliser Emplacement seulement si vous avez besoin d'interagir avec ou de créer des URL normalisées en dehors du routage.

s'il vous Plaît note: La Documentation dit importer de router , mais la dernière version betta que j'ai a Location services dans common .

0
répondu Brian 2016-06-09 16:54:07

pour la version angulaire 4+, déterminer une route active dans le modèle est assez facile car il y a une directive build-in pour ce nom d'usage routerLinkActive que vous pouvez utiliser 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
répondu asmmahmud 2017-10-11 10:23:21