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

Question

Je sais que je peux passer un paramètre à routerLink pour les routes telles que

/user/:id

en écrivant

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

mais qu'en est-il des routes telles que celle-ci :

/user/:id/details

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

Answer 1

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 Router et l'utiliser :

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

Plus d'informations dans la documentation d'Angular Tableau des paramètres de liaison section de Acheminement et navigation

Answer 2

C'est peut-être une réponse tardive mais si vous voulez naviguer sur une autre page avec param, vous pouvez le faire,

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

Il ne faut pas non plus oublier la configuration du routage comme ,

 [path: 'user/:id/details', component:userComponent, pathMatch: 'full']

Answer 3

Première configuration dans le tableau :

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

maintenant dans le code de type script :

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}`);
  });

Answer 4

Il existe de multiples façons d'y parvenir.

• Par la directive [routerLink]
• La méthode navigate(Array) de la classe Router
• La méthode navigateByUrl(string) qui prend une chaîne de caractères et renvoie une promesse.

L'attribut routerLink exige que vous importiez le routingModule dans le feature module au cas où vous auriez chargé le feature module paresseusement ou que vous importiez simplement l'app-routing-module s'il n'est pas automatiquement ajouté au tableau des importations de l'AppModule.

• RouterLink

  <a [routerLink]="['/user', user.id]">John Doe</a> <a routerLink="urlString">John Doe</a> // urlString is computed in your component

• Naviguer sur

  // 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()

Answer 5

constructor(private activatedRoute: ActivatedRoute) {

this.activatedRoute.queryParams.subscribe(params => {
  console.log(params['type'])
  });  }

Cela fonctionne pour moi !