Parlons du routage en Angular

Cet article vous présentera le routage en Angular. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il 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

Résumé1.

Pour faire simple, dans la barre d'adresse, différentes adresses (URL) correspondent à différentes pages. C'est le 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. [Recommandations du didacticiel associé : "tutoriel angulaire"]

Dans Angular, Router est un module indépendant, défini dans le module @angular/router,

• Le routeur peut coopérer avec NgModule pour effectuer des opérations de chargement paresseux (chargement paresseux) et de préchargement des modules (voir « Tutoriels angulaires de mise en route vers la série Mastery (11) - Module (NgModule), chargement différé des modules »

  ) ;

• Le routeur gérera le cycle de vie des composants et sera responsable de la création et de la destruction 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 2 composants, Page1Component et Page2Component.

2.2. Enregistrement des itinéraires

//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'un itinéraire ne nécessite que deux attributs, chemin et composant, pour définir l'itinéraire. respectivement. Le chemin relatif 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 pour identifier la route angulaire. Exécutez le code et vous pouvez voir deux hyperliens Page1 et Page2 Cliquez pour voir l'adresse de la barre d'adresse modifiée en http://localhost:4200/page2 ou http://localhost:4200/page1. . Switch

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

3.1 . Paramètres dans le chemin

De manière générale, nous utilisons les paramètres comme section dans l'URL, comme /users/1, qui représente l'utilisateur dont l'identifiant est 1, et la route est définie comme 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,
  },
];

Quand le code ts lit les paramètres, il doit d'abord pour injecter ActivatedRoute, Le code est le suivant :

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 Paramètres dans le paramètre (QueryParameter)

Il existe une autre façon d'écrire. le paramètre, tel que http:// localhost:4200/?name=cat, c'est-à-dire qu'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. format

Contrairement aux sites traditionnels purement statiques (html), l'URL dans Angular ne correspond pas à un vrai fichier (page), car Angular prend en charge le traitement de routage (Routing) pour décider quel composant afficher à l'utilisateur final. Afin de s'adapter à différents scénarios, Angular dispose de deux formats d'affichage du chemin d'URL :

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

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

La valeur par défaut est la première, sans ajouter #. Si nécessaire, vous pouvez ajouter

à app-routing.ts, tel que : useHash: true

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

5 Les problèmes rencontrés lors du déploiement

sont les mêmes, car anuglar. La prise en charge du traitement de routage (Routing), donc lors du déploiement, le déploiement sur des serveurs tels que iis, nginx, etc. aura 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

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 le même composant pour y parvenir 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 vous ne pouvez pas les lire ; 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- votre-serveur-pour-travailler-avec-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!