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

J'ai lu cette question sur la façon de déterminer l'itinéraire actif, mais c'est toujours pas clair pour moi comment faire pour déterminer un itinéraire actif avec les paramètres?

Droit maintenant, je 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 que cela fonctionne parce que je suis de passage le nom d'utilisateur comme une chaîne de caractères. Est-il possible de faire cela avec passant le paramètre correct??

Vous pouvez injecter $routingPatams à votre contrôleur et d'obtenir un paramètre de votre itinéraire.
Oui, je sais, en fait username est à partir de la RouteParams. Mais comment puis-je transmettre cela à partir de mon code HTML pour mon composant? @CyberAleks
Ce que je veux faire, c'est quelque chose comme: [ngClass]="{active: getLinkStyle('/profile/{{username}}/feed')}", mais bien sûr, cela ne fonctionnera pas..
Vous pouvez le faire comme '/profil/'+nom d'utilisateur+'/'alimentation
Oui merci @CyberAleks. Essayé, mais mon éditeur n'a pas donné le droit de syntaxe couleurs.. Afin de ne pas le tester, stupide haha! Merci!

OriginalL'auteur Aico Klein Ovink | 2016-01-02

8

Il suffit de cocher l'auto-défini router-link-active classe de a élément.

Ont-ils mettre en œuvre que sur la version bêta 2?
Est-il possible de définir automatiquement un active classe si le router-link-active classe est-elle appliquée? Parce que la plupart des modèles de CSS requièrent que d'autres noms de classe et je ne veux pas modifier le modèle. @AicoKleinOvink autant que je sache, il était déjà là dans les dernières versions alpha.
Ils ont mis sur le 2.0.0-alpha.37 (2015-09-09) exactement. github.com/angular/angular/issues/3209
Je ne pourrais pas changer la css par défaut nom, il est codé en dur. Je me suis aperçut qu'il existe une isRouteActive: propriété booléenne pour chaque [routerLink], mais je ne suis pas en mesure de référence.
Semble routerLinkActive directive ne fonctionne que sur Link Params( /foo/bar ), pas pour Query Params ( /foo;value=bar ).

OriginalL'auteur iuristona
16

Avec la nouvelle place et à venir Angulaire 2 routeur (à version 3.0-alpha.7 que j'écris ces lignes), c'est très simple.

Tout ce que vous devez faire est d'utiliser la [routerLinkActive] directive dans votre lien.
```
<a [routerLinkActive]="['active']" [routerLink]="['/contact',  contact.id ]">
    {{contact.name}}
</a>
```
C'est ce que vous allez utiliser lorsque Angulaire 2 est sorti pour de vrai, et non plus une release candidate. Je suis à l'aide de l'alpha de l'routeur maintenant et ne pas avoir de problèmes.

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

Wow, tellement simple maintenant! Ce doit être la accepté de répondre.

OriginalL'auteur Michael Oryl

Angulaire 2 rc1 router.isRouteActive n'existe plus.
Je ne pouvais pas trouver une solution de travail n'importe où, mais j'ai été en mesure de le résoudre de cette façon (la méthode personnalisée isActiveRoute fait le truc):

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

Vous êtes l'homme qui marchait très bien, merci
Comment modifier la isActiveRoute fonction pour prendre en charge les paramètres de la route?

OriginalL'auteur Mcanic

5

J'ai essayé de régler le active de la classe sans avoir à connaître précisément ce qui est de l'emplacement actuel (en utilisant le nom de la route). C'est la meilleure solution que j'ai obtenu à ce jour.

C'est la façon dont le RouteConfig ressemble (j'ai modifié un peu à 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 la Affichage 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é mon préféré de la solution pour le problème jusqu'à présent, il pourrait être utile pour vous.

Qui a l'air prometteur, se regarder dans que demain!! Beaucoup apprécié!
Toujours penser à quelque chose comme de l'interface utilisateur-sref-actif à partir de l'impressionnant ui-router serait génial..
Ok, j'ai essayé votre solution de @Alex, mais ne peut pas le faire fonctionner. C'est la partie de mon code: <a class="main" [routerLink]="['/Profile/Feed', {username: profileUser.username}]" [class.active]="router.isRouteActive(router.generate(['/Profile/Feed', {username: profileUser.username}]))"> <h3><span class="fa fa-home"></span></h3> Profiel </a>
Il semble correct, vous obtenez des erreurs par toute les chances (si vous êtes ce serait ceux-être)? Juste un rappel, vous devez importer le Router. import {ROUTER_DIRECTIVES, Router} from 'angular2/router';
Ne pas retourner les erreurs, les renvoie simplement comme faux..

OriginalL'auteur Alex Santos

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>

OriginalL'auteur VISHNU Radhakrishnan

0

Vous pouvez utiliser le nouveau service de Angular2 package 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();
    }
}
```
Remarque: il est préférable d'utiliser le service de Routeur pour déclencher des changements de route. Utilisation
Emplacement uniquement si vous avez besoin d'interagir avec ou créer normalisé Url
en dehors de routage.

Veuillez noter: Documentation dit à l'importation de router, mais la dernière betta version que j'ai est Location services dans common.

OriginalL'auteur Brian

Angulaire de la version 4+, déterminer un itinéraire actif dans le modèle est assez facile car il y a une accumulation dans la directive à cette fin 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>

OriginalL'auteur asmmahmud

Vous devez vous connecter pour publier un commentaire.