Maison > Article > interface Web > 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
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
ng g c home
ng g c à propos
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!