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

const routes: Routes = [
  {
    path: 'page1/:id',    //接收id参数
    component: Page1Component,
  },
  {
    // 实现可选参数的小技巧。 这个routing处理没有参数的url
    path: 'page1',        
    redirectTo: 'page1/',   // 跳转到'page1/:id'
  },
  {
    path: 'page2',
    component: Page2Component,
  },
];

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)

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

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

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

à 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

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!