Comment utiliser les paramètres de routage Angular5

Cette fois, je vais vous montrer comment utiliser le routage Angular5 pour transmettre des paramètres, et quelles sont les précautions lors de l'utilisation du routage Angular5 pour transmettre des paramètres. Ce qui suit est un cas pratique, jetons un coup d'oeil.

1. Les paramètres après le point d'interrogation, la manière d'obtenir les paramètres : ActivatedRoute.queryParams[id]

Par exemple : /product?id=1&name= iphone peut aussi être ： [ routerLink]= "['/books']" [ queryParams]= "{bookname:'《《生》'}

Code: html

<h4>Messages</h4>
<p>Total:{{msgs.total}}</p>
<p *ngFor="let item of msgs.data">
 <b>{{item.name}}</b>:
 <a [routerLink]="[&#39;/next&#39;,item.id]" [queryParams]="{id:item.id, msg:item.msg, name:item.name}">{{item.msg}}</a>
 <a routerLink="/final">Reply</a><p></p>
</p>

Obtenir le paramètre js

ngOnInit() {
 let obj = this.route.queryParams["_value"];
 console.log(obj);
}

2. Formulaire deux points,

Par exemple : path:/product/:id

Comment obtenir les paramètres : ActivatedRoute.params[id]

Le premier lien de route dans le code html ci-dessus est

De plus, le routage doit être configuré

{
 path:'listDetail/:id',
 component:ListDetailComponent
 }

Je crois que vous maîtrisez le méthode après avoir lu le cas dans cet article. Veuillez venir pour des informations plus intéressantes. Suivez d'autres articles connexes sur le site Web chinois de php

Lecture recommandée :

Comment utiliser JS pour implémenter la transparence ! animation de dégradé
Comment utiliser jQuery pour parcourir les nœuds et les attributs XML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!