Explication détaillée de l'utilisation des paramètres de routage Angular5

Cette fois je vais vous apporter une explication détaillée de l'utilisation du passage de paramètres de routage Angular5routage, quelles sont les précautions lors de l'utilisation du passage de paramètres de routage Angular5, 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>

Récupérer le paramètre js

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

2. Forme 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
 }

Reportez-vous à http:// www.jb51.net/article/139125. htm

Saut de chemin dans 3.js

Par exemple : path:/product,component:ProductComponent,data:[{madeInChina:true}] >

Méthode d'obtention des paramètres : ActivatedRoute.snapshot.data[0][madeInChina]

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Veuillez prêter attention aux autres articles connexes. sur le site Web php chinois pour un contenu plus passionnant !

Lecture recommandée :

JS implémente la fonction de dégradé de transparence

Explication détaillée des étapes pour utiliser .vue dans vscode

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!