web-dev-qa-db-fra.com

Variable de routage dans Angular2

J'ai lu la documentation du nouveau routeur Angular. L'exemple qu'ils ont pour le routage vers une variable est le suivant:

Composant/Module:

angular.module('myApp', ['ngFuturisticRouter'])
.controller('AppController', ['$router', function($router) {
  $router.config({ path: '/user/:id' component: 'user' });
  this.user = { name: 'Brian', id: 123 };
});

HTML/Modèle:

<div ng-controller="AppController as app">
  <a router-link="user({id: app.user.id})">{{app.user.name}}</a>
</div>

Voici mon composant:

@RouteConfig([
  { path: '/', component: Home, as: 'home' },
  { path: '/displays/:id', component: DisplayDetails, as: 'display-details' }
])

Et mon HTML/modèle:

<div class="col-md-3" *ng-for="#display of displays">
    <a [router-link]="['/display-details({id: display.id})']"><display-card ></display-card></a>
</div>

J'ai également essayé au lieu de mettre le composant alias (display-details). J'ai essayé de mettre le chemin réel et le composant lui-même, mais ils me donnent tous la même erreur:

EXCEPTION: Component "App" has no route named "display-details({id: display.id})". in [null]
angularrouting
9
ThreeAccents

Comme suggéré par @ThreeAccents

Citant la documentation RouterLink .

RouterLink s'attend à ce que la valeur soit un tableau de noms de route suivi des paramètres pour ce niveau de routage. Par exemple, ['/Team', {teamId: 1}, 'User', {userId: 2}] signifie que nous voulons générer un lien pour la route Team avec params {teamId: 1} et avec un itinéraire enfant User avec params {userId: 2}.

La solution consiste donc à modifier votre routerLink comme suit:

<div class="col-md-3" *ng-for="#display of displays">
    <a [routerLink]="['/display-details', {id: display.id}]">
       <display-card ></display-card>
    </a>
</div>

Content que ça a marché pour toi :)

8
Eric Martinez

Cette syntaxe fonctionne dans mon cas: 

<div class="col-md-3" *ng-for="#display of displays">
    <a [routerLink]="['/display-details', display.id]">
       <display-card ></display-card>
    </a>
</div>

avec cette configuration de routeur: 

@RouteConfig([
  { path: '/', component: Home, as: 'home' },
  { path: '/display-details/:id', component: DisplayDetails }
])
8
Phil

Pour le chemin: '/ user /: id'

Nous pouvons utiliser dans les deux sens comme/user; id: 1234 ou/user/123

// For /user;id:1234
[routerLink]="['/user', {id: display.id}]"
// For /user/1234
[routerLink]="['/user', display.id]"

Je suis venu ici pour mon problème avec chemin: '/ clients /: id/detail' et enfin fini avec:

[routerLink]="['/customers', cust.id, 'detail']"
3
Ali Adravi

Vous pouvez utiliser une fonction dans votre composant pour obtenir l'URL dynamique et les paramètres à l'aide de la directive routerLink et queryParams.

<div class="col-md-3" *ng-for="#display of displays">
    <a [routerLink]="getURL(display)" 
       [queryParams]="getParams(display)>
       <display-card ></display-card>
    </a>
</div>

en composant: 

getURL(display) { 
    return ['/displays', display.id];
}

getParams(display) { 
    return { param: display.somethingElse }; 
}
0
xiaoke