web-dev-qa-db-fra.com

Angular: Comment déterminer une route active avec des paramètres?

J'ai lu cette question sur la façon de déterminer l'itinéraire actif , mais je ne comprends 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 parce que je passe le nom d'utilisateur sous forme de chaîne. Est-il possible de faire cela en passant le paramètre correct?

angularangular2-templateangular2-routing
14
Aico Klein Ovink

Il suffit de cocher la classe router-link-active définie automatiquement dans l'élément a.

8
iuristona

Avec le nouveau routeur Angular 2, à venir (à version 3.0-alpha.7 au moment où j'écris ceci), 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 lorsqu’Angular 2 sera commercialisé, et non plus un candidat à la publication. J'utilise l'alpha du routeur maintenant et je n'ai aucun problème.

Voici Plunk le démontrer . Vous pouvez voir que les liens deviennent rouges lorsque vous cliquez dessus. 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
Michael Oryl

Dans Angular 2, rc1 router.isRouteActive n'existe plus . Je ne pouvais trouver de solution de travail nulle part, mais j’étais capable de la résoudre comme ceci (la méthode personnalisée isActiveRoute fait le bon choix):

App.component.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.template.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
Mcanic

J'ai essayé de régler le actif classe sans avoir à savoir exactement quelle est la position actuelle (en utilisant le nom de la route). C'est la meilleure solution que j'ai à ce jour.

Voici comment RouteConfig ressemble à (Je l'ai un peu modifié 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 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>

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

5
Alex Santos

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

Pour Angular version 4+, déterminer un itinéraire actif dans le modèle est assez facile car il existe une directive intégrée pour cet objet 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

Vous pouvez utiliser le nouveau service de localisation du paquet 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 modifications d’itinéraire. Utilisation Emplacement uniquement si vous devez interagir avec ou créer des URL normalisées en dehors de l'acheminement.

Remarque: La documentation indique l'importation de router, mais la dernière version betta que j'ai a des services Location dans common.

0
Brian