Angular Learning Parlons du routage (Routage)

Cet article vous amènera à continuer l'apprentissage d'Angular, à comprendre brièvement le routage dans Angular, à présenter l'utilisation de base du routage et à voir comment recevoir des paramètres. J'espère que cela sera utile à tout le monde !

Environnement :

• CLI angulaire : 11.0.6

• Angulaire : 11.0.7

• Nœud : 12.18.3

• npm : 6.14.6

• IDE : Visual Studio Code

1. Résumé

Pour faire simple, dans la barre d'adresse, différentes adresses (URL) correspondent à différentes pages, ce qui est du routage. De plus, en cliquant sur les boutons avant et arrière du navigateur, le navigateur avancera ou reculera dans votre historique de navigation, toujours en fonction du routage. [Tutoriels associés recommandés : "Tutoriel angulaire"]

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");

• Le routeur gérera le cycle de vie des composants et sera responsable de la création et détruire des composants.

Pour un nouveau projet basé sur AngularCLI, vous pouvez ajouter le AppRoutingModule à app.component.ts par défaut via l'option lors de l'initialisation.

2. Utilisation de base du routeur

2.1. Préparation

Nous créons d'abord 2 pages pour illustrer l'utilisation du routage :

ng g c page1
ng g c page2

Utilisez la commande AnuglarCLI ci-dessus pour créer les composants Page1Component, Page2Component 2.

2.2. Enregistrer la route

//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 de la 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.

2.3. Utilisation en html

<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

2.4. Utilisation dans le code ts

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

Paramètres dans le chemin

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

est différent du statique pur traditionnel. (html) sites en angulaire L'url ne correspond pas à un vrai fichier (page), car anuglar prend en charge le processus de routage pour décider quel composant afficher à l'utilisateur final. Afin de s'adapter à différents scénarios, Angular dispose de 2 formats d'affichage du chemin d'URL :

• http://localhost:4200/page1/123

• http://localhost:4200/#/page1/123

La valeur par défaut est le premier sans #. Si nécessaire, vous pouvez ajouter useHash: true à app-routing.ts, tel que :

// app-routing.ts
@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule],
})

5. Problèmes rencontrés lors du déploiement

De même, car anuglar prend en charge le traitement de routage (Routing), lors du déploiement, déployez sur des serveurs tels car iis, nginx, etc. auront différentes techniques (exigences), référence détaillée :
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure -your -server-to-work-with-html5mode

6. Résumé

• angular ne prend pas en charge le routage facultatif par défaut (par exemple /user/:id?), mais nous pouvons définir 2 routes pointant vers la même utilisation. un composant pour implémenter cela et réaliser la réutilisation du code ; (ou utiliser redirectTo)

• Vous pouvez utiliser le paramètre useHash pour ajouter un # avant le chemin augulaire ;

• Lors de la lecture des paramètres, vous devez vous abonner et ne pouvez pas être lu directement.

• 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 liées à la programmation, veuillez visiter : Introduction à la 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!