La meilleure façon d'obtenir des paramètres par routage dans angulaire4.0

Cette fois, je vais vous présenter la meilleure façon de passer et d'obtenir des paramètres dans le routage angulaire4.0 Quelles sont les précautions pour transmettre et obtenir des paramètres dans le routage angulaire4.0 ? Voici quelques exemples de cas pratiques.

Après avoir étudié le site officiel de ng4, j'ai enfin trouvé la méthode que je souhaitais. Le résultat que je souhaite est d'utiliser les paramètres d'épissage '&' à envoyer, ce qui est le meilleur pour la lecture.

Sinon, il existe de nombreuses épissures « / », qui peuvent facilement confondre les paramètres et les noms de composants.

Généralement, nos paramètres de transfert de saut de page sont dans ce format :

http://angular.io/api?uid=1&username=moon

Cependant, dans les applications SPA d'une seule page, la plupart des résultats sont les suivants [Les vidéos élémentaires sont toutes superficielles comme celle-ci]

http://angular.io/api/1/moon

Alors, comment obtenir les résultats que j'ai mentionnés ?

La concentration commence.

Réalisez le passage de la page produit à la page de détail du produit.

étape 1 : Configurez le routage dans app-routing.module.ts.

const routes: Routes = [
{
 path: 'product',
 component: ProductComponent,
 },
 {
 path: 'product-detail',
 component: ProductDetailComponent,
 }
];

étape 2 : Écrivez le saut dans product.ts et transmettez les paramètres.

constructor(
 private router: Router, //这里需要注入Router模块
){}
jumpHandle(){
 //这是在html中绑定的click跳转事件
 this.router.navigate(['product-detail'], {
 queryParams: {
  productId: '1',
  title: 'moon'
 }
 });
}

étape 3 : Obtenez les paramètres transmis productId et title dans product-detail.ts

constructor( 
 private activatedRoute: ActivatedRoute, //这里需要注入ActivatedRoute模块 
) { 
 activatedRoute.queryParams.subscribe(queryParams => { 
 let productId = queryParams.productId; 
 let title = queryParams.title; 
 }); 
}

ok, c'est la solution parfaite.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser l'attribut on-change dans IView

Comment utiliser la configuration sass dans vue projet

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!