web-dev-qa-db-fra.com

Comment passer et obtenir un paramètre avec routerLink dans Angular 2?

Je veux passer une valeur avec l'URL en utilisant routerLink. Et lisez cette valeur sur une autre page. Comme j'ai la liste de produits. Lors de la sélection du premier enregistrement, l'id de cet enregistrement est transféré à la page de détail du produit. Après avoir lu ce produit, je veux montrer les détails de ce produit.

Alors, comment puis-je passer et obtenir le paramètre?

angularangular2-routing
3
MohammedAshrafali

je suppose que vous avez un code comme celui-ci:

{ path: 'product/:id', component: ProductDetailComponent }

dans le modèle ProductList

<a [routerLink]="['/product', id]">Home</a>

ou

<a [routerLink]="['/product', 5]">Home</a>

où id est une variable, vous l'avez peut-être sous forme de boucle.

dans ProductDetailComponent:

constructor(
  private route: ActivatedRoute,
  private router: Router
) {}
ngOnInit() {

  this.route.params
    // (+) converts string 'id' to a number
    .switchMap((params: Params) => this.yourProductService.getProductById(+params['id']))
    .subscribe((product) => this.product = product);
}

Document de routeur: https://angular.io/docs/ts/latest/guide/router.html

12
Tiep Phan

Utilisez routerLink sur votre balise a pour la transmettre par l’URL.

[routerLink]="['yourRouteHere', {'paramKey': paramValue}]

Pour l'obtenir, vous devez utiliser le service ActivatedRoute. Injectez-le dans votre composant et utilisez sa méthode subscribe. Ici ma route est le service injecté 

this.route.params.subscribe(params => {
   const id = Number.parseInt(params['paramKey']);
}

Si vous voulez obtenir des paramètres à partir du segment route utilisez .params, sinon si vous voulez à partir de query string , utilisez .queryParams 

5
Suren Srapyan
  1. Supposons que votre URL soit http://mit.edu/dashboard et que le résultat souhaité soit http://mit.edu/dashboard/user?id=1 puis utilisez le code ci-dessous
<a [routerLink]="['user']" [queryParams]="{id: 1}" </a>
  1. Supposons que votre URL soit http://mit.edu/dashboard et que le résultat souhaité soit http://mit.edu/user?id=1, puis utilisez ci-dessous code ["La différence est / Dashobard" manquant ici de l'URL]
<a [routerLink]="['/user']" [queryParams]="{id: 1}" </a>
0
sparsh turkane