Une brève discussion sur la façon la plus agréable de transmettre des paramètres et d'obtenir des paramètres de routage dans angulaire 4.0

L'éditeur suivant partagera avec vous un article sur la manière la plus agréable de transmettre des paramètres et d'obtenir des paramètres de routage dans angulaire4.0. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l'éditeur et jetons un œil.

Après des recherches sur le site officiel de ng4, j'ai enfin trouvé la méthode que je voulais. 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 « / », ce qui peut 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

Mais 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 ?

Le point principal commence.

Passez de la page produit à la page de détails 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.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Explication détaillée de la méthode de configuration utilisant sass basée sur le préchargement CSS dans vue

Implémenté dans WeChat applet Exemple de code pour les images avec zoom au doigt

Pagination basée sur vue.js

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!