Maison > interface Web > js tutoriel > La meilleure façon d'obtenir des paramètres par routage dans angulaire4.0

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

php中世界最好的语言
Libérer: 2018-04-11 14:16:56
original
3006 Les gens l'ont consulté

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,
 }
];
Copier après la connexion

é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'
 }
 });
}
Copier après la connexion

é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; 
 }); 
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal