Dans Angular, le routage以模块为单位, et chaque module peut avoir son propre routage. [Recommandation de didacticiel associée : "tutoriel angulaire"]
1. Créez des composants de page, des composants de mise en page et des composants de navigation à utiliser pour le routage
Créer le composant de page d'accueil ng gc pages/home
Créer le composant de page à propos de nous ng gc pages/about
Créer le composant de mise en page ng gc pages/layout
Créer le composant de navigation ng gc pages/navigation
2. Créer des règles de routage
// app.module. ts
importer { Routes } depuis "@angular/router"
const routes : Routes = [
{
chemin : "maison",
composant:ComposantAccueil
},
{
chemin : "à propos",
composant : À propos du composant
}
] 3. Présentez le module de routage et démarrez
// app.module.ts
importer { RouterModule, Routes } depuis "@angular/router"
@NgModule({
importations : [RouterModule.forRoot(routes, { useHash: true })],
})
export class AppModule {} 4. Ajoutez路由插座
<!-- Le socket de routage, c'est-à-dire le composant de routage correspondant au composant d'espace réservé, sera affiché ici --> <router-outlet></router-outlet>5. Définissez le lien
<a routerLink="/home">Page d'accueil</a>
dans le composant de navigation
<a routerLink="/about">À propos de nous</a>
1. Redirection
const routes : Routes = [
{
chemin : "maison",
composant:ComposantAccueil
},
{
chemin : "à propos",
composant : À propos du composant
},
{
chemin: "",
// Redirection redirectVers : "home",
// Correspondance exacte pathMatch : "complet"
}
] 2.
Routes const de 404 pages : Routes = [
{
chemin : "maison",
composant:ComposantAccueil
},
{
chemin : "à propos",
composant : À propos du composant
},
{
chemin: "**",
composant : NotFoundComponent
}
] 1. Paramètres de requête
<a routerLink="/about" [queryParams]="{ name: 'kitty' }">À propos de nous</a> importer { ActivatedRoute } depuis "@angular/router"
classe d'exportation AboutComponent implémente OnInit {
constructeur (route privée : ActivatedRoute) {}
ngOnInit() : vide {
this.route.queryParamMap.subscribe(query => {
requête.get("nom")
})
}
} 2. Paramètre dynamique
const routes : Routes = [
{
chemin : "maison",
composant:ComposantAccueil
},
{
chemin : "à propos/:nom",
composant : À propos du composant
}
] <a [routerLink]="['/about', 'zhangsan']">À propos de nous</a>
importer { ActivatedRoute } depuis "@angular/router"
classe d'exportation AboutComponent implémente OnInit {
constructeur (route privée : ActivatedRoute) {}
ngOnInit() : vide {
this.route.paramMap.subscribe(params => {
params.get("nom")
})
}
} L'imbrication des itinéraires fait référence à la manière de定义子级路由.
const routes : Routes = [
{
chemin : "à propos",
composant : À propos du composant,
enfants: [
{
chemin : "présenter",
composant : IntroduceComponent
},
{
chemin : "histoire",
composant : HistoriqueComponent
}
]
}
] <!-- about.component.html -->
<mise en page de l'application>
<p>à propos des œuvres !</p>
<a routerLink="/about/introduce">Profil de l'entreprise</a>
<a routerLink="/about/history">Historique du développement</a>
<div>
<sortie-routeur></sortie-routeur>
</div>
</app-layout> Nommez la socket
Exposez les composants de routage enfants dans différentes sorties de routage.
{
chemin : "à propos",
composant : À propos du composant,
enfants: [
{
chemin : "présenter",
composant : IntroduceComponent,
sortie : "gauche"
},
{
chemin : "histoire",
composant : HistoryComponent,
sortie : "à droite"
}
]
} <!-- about.component.html --> <mise en page de l'application> <p>à propos des œuvres !</p> <nom de la sortie du routeur="left"></router-outlet> <router-outlet name="right"></router-outlet> </app-layout>
<a
[routerLink]="[
'/à propos de',
{
points de vente : {
à gauche : ['présenter'],
à droite : ['histoire']
}
}
]"
>À propos de nous</a> <!-- app.component.html --> <button (click)="jump()">Aller à l'historique de développement</button>
// app.component.ts
importer {Routeur} depuis "@angular/router"
classe d'exportation HomeComponent {
constructeur (routeur privé : routeur) {}
saut() {
this.router.navigate(["/about/history"], {
paramètres de requête : {
nom : "Chaton"
}
})
}
} Résumez la configuration de routage dans le module racine dans un module de routage distinct, appelé根路由模块, puis introduisez le module de routage racine dans le module racine.
importer { NgModule } depuis "@angular/core"
importer { HomeComponent } depuis "./pages/home/home.component"
importer { NotFoundComponent } depuis "./pages/not-found/not-found.component"
const routes : Routes = [
{
chemin: "",
composant:ComposantAccueil
},
{
chemin: "**",
composant : NotFoundComponent
}
]
@NgModule({
déclarations : [],
importations : [RouterModule.forRoot(routes, { useHash: true })],
// Exportez le module fonction de routage angulaire, car le composant socket de routage fourni dans le module RouterModule est utilisé dans le composant racine des exports du module racine : [RouterModule]
})
export class AppRoutingModule {} import { BrowserModule } depuis "@angular/platform-browser"
importer { NgModule } depuis "@angular/core"
importer {AppComponent} depuis "./app.component"
importer {AppRoutingModule} depuis "./app-routing.module"
importer { HomeComponent } depuis "./pages/home/home.component"
importer { NotFoundComponent } depuis "./pages/not-found/not-found.component"
@NgModule({
déclarations : [AppComponent, HomeComponent, NotFoundComponent],
importations : [BrowserModule, AppRoutingModule],
fournisseurs : [],
bootstrap : [AppComponent]
})
export class AppModule {} Le chargement paresseux des itinéraires est basé sur模块.
1. Créez le module utilisateur ng gm user --routing=true et créez ensemble le module de routage de ce module
2. Créez le composant de page de connexion ng gc user/pages/login
3. Créez le composant de page d'enregistrement ng gc user/pages/register
4. Configuration Règles de routage pour les modules utilisateur
import { NgModule } depuis "@angular/core"
importer { Routes, RouterModule } depuis "@angular/router"
importer { LoginComponent } depuis "./pages/login/login.component"
importer { RegisterComponent } depuis "./pages/register/register.component"
const routes : Routes = [
{
chemin : "connexion",
composant : Composant de connexion
},
{
chemin : "s'inscrire",
composant : RegisterComponent
}
]
@NgModule({
importations : [RouterModule.forChild(routes)],
exportations : [RouterModule]
})
export class UserRoutingModule {} 5. Associez le module de routage utilisateur au module de routage principal
// app-routing.module.ts
const routes : Routes = [
{
chemin : "utilisateur",
loadChildren : () => import("./user/user.module").then(m => m.UserModule)
}
] 6. Ajoutez le lien d'accès <a routerLink="/user/login">Connexion</a>
dans le composant de navigation
<a routerLink="/user/register">S'inscrire</a>
Le garde-route indique à l'itinéraire si la navigation vers l'itinéraire demandé est autorisée.
Les méthodes Route Guard peuvent renvoyer boolean ou Observable <boolean> ou Promise <boolean> , qui se résolvent en une valeur booléenne à un moment donné dans le futur.
1. CanActivate
vérifie是否可以访问某一个路由.
CanActivate为接口et la classe route guard doit implémenter cette interface. Cette interface stipule que la classe doit avoir une méthode canActivate, qui détermine si elle doit autoriser l'accès à la route cible.
Un itinéraire peut appliquer多个守卫. Si toutes les méthodes de garde sont autorisées, l'accès à la route est autorisé. Si une méthode de garde n'est pas autorisée, l'accès à la route n'est pas autorisé.
Créer des gardes de route : ng g guard guards/auth
import { Injectable } from "@angular/core"
importer { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } depuis "@angular/router"
importer {Observable} depuis "rxjs"
@Injectable({
fourni dans : "root"
})
la classe d'exportation AuthGuard implémente CanActivate {
constructeur (routeur privé : routeur) {}
canActivate() : booléen | UrlTree {
// Utilisé pour implémenter le jump return this.router.createUrlTree(["/user/login"])
// Désactive l'accès à la route cible renvoie false
//Autoriser l'accès à la route cible renvoie vrai
}
} {
chemin : "à propos",
composant : À propos du composant,
canActivate : [AuthGuard]
} 2. CanActivateChild
vérifie si l'utilisateur peut accéder à une certaine sous-route.
Créez un garde de route : ng g guard guards/admin Remarque : Pour sélectionner CanActivateChild, déplacez la flèche vers cette option et appuyez sur espace pour confirmer la sélection.
importer {Injectable} depuis "@angular/core"
importer { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } depuis "@angular/router"
importer {Observable} depuis "rxjs"
@Injectable({
fourni dans : "root"
})
classe d'exportation AdminGuard implémente CanActivateChild {
canActivateChild() : booléen | UrlTree {
retourner vrai
}
} {
chemin : "à propos",
composant : À propos du composant,
canActivateChild : [AdminGuard],
enfants: [
{
chemin : "introduire",
composant : IntroduceComponent
}
]
} 3. CanDeactivate
vérifie si l'utilisateur peut quitter l'itinéraire.
Par exemple, si le contenu saisi par l'utilisateur dans le formulaire n'est pas enregistré et que l'utilisateur souhaite quitter l'itinéraire, le gardien peut être appelé pour l'inviter.
importer {Injectable} depuis "@angular/core"
importer {
PeutDésactiver,
ActivatedRouteSnapshot,
Instantané de l'état du routeur,
URLArbre
} de "@angular/router"
importer {Observable} depuis "rxjs"
interface d'exportation CanComponentLeave {
canLeave : () => booléen
}
@Injectable({
fourni dans : "root"
})
classe d'exportation UnsaveGuard implémente CanDeactivate<CanComponentLeave> {
canDeactivate (composant : CanComponentLeave) : boolean {
if (component.canLeave()) {
retourner vrai
}
retourner faux
}
} {
chemin: "",
composant : HomeComponent,
canDeactivate : [UnsaveGuard]
} importez { CanComponentLeave } depuis "src/app/guards/unsave.guard"
classe d'exportation HomeComponent implémente CanComponentLeave {
monFormulaire : FormGroup = nouveau FormGroup({
nom d'utilisateur : nouveau FormControl()
})
canLeave() : booléen {
si (this.myForm.dirty) {
if (window.confirm("Il y a des données qui n'ont pas été enregistrées, êtes-vous sûr de vouloir quitter ?")) {
retourner vrai
} autre {
retourner faux
}
}
retourner vrai
} 4. Resolve
vous permet d'obtenir des données avant de saisir le routage, puis de saisir le routage une fois l'acquisition des données terminée.
ng g resolver <name>
import { Injectable } depuis "@angular/core"
importer {Résoudre} depuis "@angular/router"
tapez returnType = Promesse<{ name: string }>
@Injectable({
fourni dans : "root"
})
la classe d'exportation ResolveGuard implémente Resolve<returnType> {
résoudre() : returnType {
retourner une nouvelle promesse (fonction (résoudre) {
setTimeout(() => {
résoudre({ nom : "Zhang San" })
}, 2000)
})
}
} {
chemin: "",
composant : HomeComponent,
résoudre: {
utilisateur : ResolveGuard
}
} classe d'exportation HomeComponent {
constructeur (route privée : ActivatedRoute) {}
ngOnInit() : vide {
console.log(this.route.snapshot.data.user)
}
}