Comment passer un paramètre à routerLink qui se trouve quelque part dans l'URL?

208

Je sais que je peux transmettre un paramètre à routerLinkdes itinéraires tels que

/user/:id

en écrivant

[routerLink]="['/user', user.id]"

mais qu'en est-il des itinéraires comme celui-ci:

/user/:id/details

Existe-t-il un moyen de définir ce paramètre ou dois-je envisager un schéma d'URL différent?

angular angular2-routing angular2-router3 Thorsten Westheider
la source

Réponses:

348

Dans votre exemple particulier, vous feriez ce qui suit routerLink:

[routerLink]="['user', user.id, 'details']"

Pour ce faire dans un contrôleur, vous pouvez injecter Routeret utiliser:

router.navigate(['user', user.id, 'details']);

Plus d'informations dans la section Angular docs Link Parameters Array de Routing & Navigation

Wojciech Kwiatek
la source
pouvez-vous fournir un lien où je peux trouver plus d'informations à ce sujet ..
refactor
4
@CleanCrispCode Vous pouvez en savoir plus à ce sujet dans le guide Angular docs at router: angular.io/docs/ts/latest/guide/…
Wojciech Kwiatek
Et la <button mat-button routerLink="...">View user</button>syntaxe?
Stephane
33

C'est peut-être une réponse très tardive, mais si vous voulez parcourir une autre page avec param, vous pouvez, 

[routerLink]="['/user', user.id, 'details']"

vous ne devez pas non plus oublier la configuration de routage comme,

 [path: 'user/:id/details', component:userComponent, pathMatch: 'full']
Rıdvan
la source
11

Configurez d'abord dans le tableau:

const routes: Routes = [  
{
  path: 'class/:id/enrollment/:guid',
  component: ClassEnrollmentComponent
 }
];

maintenant dans le code de script de type:

this.router.navigate([`class/${classId}/enrollment/${4545455}`]);

recevoir des paramètres dans un autre composant

 this.activatedRoute.params.subscribe(params => {
  let id = params['id'];
  let guid = params['guid'];

  console.log(`${id},${guid}`);
  });
Rejwanul Reja
la source
0

Il existe plusieurs façons d'y parvenir.

  • Via la directive [routerLink]
  • La méthode naviguer (Array) de la classe Router
  • La méthode naviguerByUrl (chaîne) qui prend une chaîne et renvoie une promesse

L'attribut routerLink vous oblige à importer le module de routage dans le module de fonctionnalités au cas où vous auriez chargé paresseusement le module de fonctionnalités ou à importer simplement le module de routage d'application s'il n'est pas automatiquement ajouté au tableau des importations AppModule.

  • RouterLink
<a [routerLink]="['/user', user.id]">John Doe</a>
<a routerLink="urlString">John Doe</a> // urlString is computed in your component
  • Naviguer
// Inject Router into your component
// Inject ActivatedRoute into your component. This will allow the route to be done related to the current url
this._router.navigate(['user',user.id], {relativeTo: this._activatedRoute})
  • NavigateByUrl
this._router.navigateByUrl(urlString).then((bool) => {}).catch()
makinyelure
la source