Explication détaillée de l'utilisation du routeur dans Angular 5.x

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de Router dans Angular 5.x Quelles sont les précautions lors de l'utilisation de Router dans Angular 5.x Voici un cas pratique, prenons. un regard.

Préface :

Le saut entre les vues de l'application angulaire dépend du routeur (routage). Dans ce chapitre, nous parlerons de l'application du routeur

. Explication avec exemples

Les résultats d'exécution sont les suivants. Trois barres de navigation sont configurées : Accueil, À propos et Tableau de bord. Cliquez sur différentes barres de navigation pour accéder à la page correspondante :

Créer 3 composants

1. ng g c home

2. ng g c à propos

3. ng g c tableau de bord

Routage et configuration

(1)**Présentez le routeur angulaire **

Lors de l'utilisation du routeur angulaire, vous devez introduire le module de routeur, comme suit :

// app.module.ts
import { RouterModule } from '@angular/router';
imports: [
 BrowserModule, RouterModule
],

( 2 ) Configuration du routage

Rappelez-vous qui gère le composant Oui, il est géré par le module ? Par conséquent, introduisez le composant nouvellement créé dans app.moudle. Comme suit :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { appRoutes } from './routerConfig';
import { AppComponent } from './app.component';
import { AboutComponent } from './components/about/about.component';
import { HomeComponent } from './components/home/home.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

Astuce : Faites attention au chemin du composant Pour faciliter la gestion, nous avons déplacé le composant nouvellement créé vers le dossier des composants.

Créer le fichier de configuration du routeur

Dans le répertoire de l'application, créez le fichier routerConfig.ts. Le code est le suivant :

import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
export const appRoutes: Routes = [
 { path: 'home', 
 component: HomeComponent 
 },
 {
 path: 'about',
 component: AboutComponent
 },
 { path: 'dashboard',
 component: DashboardComponent
 }
];

Remarque : Angular 2.X et supérieur, commencez à utiliser TypeScript pour écrire du code au lieu de JavaScript, donc le suffixe du fichier est : ts à la place de js

Comment appeler ce fichier routerConfigue ? Il doit être chargé dans app.module.ts car app.moudle.ts est l'entrée de l'ensemble de l'application Angular.

// app.module.ts
import { appRoutes } from './routerConfig';
imports: [
 BrowserModule,
 RouterModule.forRoot(appRoutes)
],

Déclarer la prise du routeur

Dans le fichier app.component.html, ajoutez le code :

<p style="text-align:center">
 <h1>
  {{title}}!!
 </h1>
 <nav>
  <a routerLink="home" routerLinkActive="active">Home</a>
  <a routerLink="about">About</a>
  <a routerLink="dashboard">Dashboard</a>
 </nav>
 <router-outlet></router-outlet>
 </p>

Exécuter

Entrez le chemin où se trouve le projet et exécutez-le

ng serve --open

Lorsque webpack est compilé avec succès, dans la barre d'adresse du navigateur, saisissez : http://localhost:4200.

pour voir les résultats dès le début de cet article.

Concernant Router, changez la façon dont il est écrit :

Dans le fichier app.moudle.ts, le code est le suivant :

 imports: [
  BrowserModule,
  RouterModule.forRoot(
  [
   { path: 'home', 
   component: HomeComponent 
   },
   {
   path: 'about',
   component: AboutComponent
   },
   {
   path: 'dashboard',
   component: DashboardComponent
   }
  ]
  )
 ],

De cette façon, il n'est pas nécessaire de créer un fichier routerConfigure.ts séparé.

Résumé

Depuis l'introduction de l'orientation composant (composant), la gestion du routage est bien plus pratique que AngularJS (1.X).

Autre optimisation :

Peut-être avez-vous remarqué que lors de l'accès à http://localhost:4200, son chemin devrait être "/", et nous devrions définir ce chemin par défaut.

{
   path: '',
   redirectTo:'/home',
   pathMatch: 'full'
   },

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utiliser JS pour exploiter le contenu de la zone de texte de saisie

Explication détaillée de l'utilisation de React Router v4

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!