Maison >interface Web >js tutoriel >Une brève analyse du routage d'apprentissage angulaire
Cet article vous amènera à comprendre le routage dans Angular, à présenter l'utilisation de base du routage et à voir comment recevoir des paramètres. J'espère qu'il sera utile à tout le monde !
Environnement :
1. Résumé
CLI angulaire : 11.0.6
Angulaire : 11.0.7
Nœud :
npm : 6.14.6- IDE : Visual Studio Code
Dans Angular, Router est un module indépendant, défini dans le module @angular/router
Router peut coopérer avec NgModule pour le chargement paresseux des modules (chargement paresseux). opération de préchargement (voir "Tutoriels Angular Getting Started to Mastering Series (11) - Module (NgModule), Delayed Loading Module");
2. Utilisation de base du routeur
Nous créons d'abord 2 pages pour illustrer l'utilisation du routage :
ng g c page1 ng g c page2Utilisez la commande AnuglarCLI ci-dessus pour créer les composants Page1Component, Page2Component 2. 2.2. Enregistrer les routes
//src\app\app-routing.module.ts
const routes: Routes = [
{
path: 'page1',
component: Page1Component
},
{
path: 'page2',
component: Page2Component
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
Comme vous pouvez le constater, l'enregistrement simple d'une route ne nécessite que deux attributs : chemin et composant, qui définissent respectivement le chemin relatif de la route et le composant de réponse de cette route.
<a routerLink="page1">Page1</a> |
<a routerLink="page2">Page2</a>
Dans le modèle html, utilisez directement l'attribut routerLink et identifiez la route comme angulaire. Après avoir exécuté le code, vous pouvez voir deux hyperliens, Page1 et Page2 Cliquez pour voir que l'adresse de la barre d'adresse est modifiée en http://localhost:4200/page2 ou http://localhost:4200/page1. dans la page 1 et la page 2
Parfois, il est nécessaire de sauter en fonction de la logique métier dans ts. Dans ts, l'instance de routeur doit être injectée, telle que
constructor(private router: Router) {}Code de saut :
// 跳转到 /page1 this.router.navigate(['/page1']); // 跳转到 /page1/123 this.router.navigate(['/page1', 123]);
3 Recevoir les paramètres
De manière générale, nous utilisons les paramètres comme paramètres dans. la section url A, telle que /users/1, représente l'utilisateur dont l'identifiant est 1. La route est définie dans le style "/users/id".
Pour notre page simple, par exemple, notre page page1 peut passer le paramètre id, nous devons alors modifier notre routage vers :const routes: Routes = [ { path: 'page1/:id', //接收id参数 component: Page1Component, }, { // 实现可选参数的小技巧。 这个routing处理没有参数的url path: 'page1', redirectTo: 'page1/', // 跳转到'page1/:id' }, { path: 'page2', component: Page2Component, }, ];ts Lorsque le code lit les paramètres, vous devez d'abord injecter ActivatedRoute, le code est comme suit :
constructor(private activatedRoute: ActivatedRoute) {} ngOnInit(): void { this.activatedRoute.paramMap.subscribe((params) => { console.log('Parameter id: ', params.get('id')); // 地址 http://localhost:4200/page1/33 // 控制台输出:Query Parameter name: 33 // 地址 http://localhost:4200/page1/ // 控制台输出:Query Parameter name: (实际结果为undefined) }); }3.2. Il existe une autre façon d'écrire le paramètre
dans le paramètre (QueryParameter), comme http://localhost:4200/?name=cat, c'est-à-dire après l'adresse URL. , ajoutez un point d'interrogation « ? », puis ajoutez le nom du paramètre et la valeur du paramètre (« name=cat »). C'est ce qu'on appelle un paramètre de requête (QueryParameter).
Lors de la prise de ce paramètre de requête, il est similaire au paramètre de routage précédent, sauf que paramMap est remplacé par queryParamMap Le code est le suivant :this.activatedRoute.queryParamMap.subscribe((params) => { console.log('Query Parameter name: ', params.get('name')); // 地址 http://localhost:4200/page1?name=cat // 控制台输出:Query Parameter name: cat // 地址 http://localhost:4200/page1/ // 控制台输出:Query Parameter name: (实际结果为undefined) });
4. Le format d'affichage du chemin d'URL
// app-routing.ts @NgModule({ imports: [RouterModule.forRoot(routes, { useHash: true })], exports: [RouterModule], })
useHash: true
5. Problèmes rencontrés lors du déploiement
6. Résumé
Pour les problèmes de déploiement après l'emballage, vérifiez le wifi officiel (https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to- work-with-html5mode)
Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !
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!