Cet article vous amènera à comprendre le module de routage dans angular et à présenter les connaissances connexes telles que les règles de correspondance, les paramètres de routage, l'imbrication de routage, les sockets nommées, le routage de navigation, le chargement paresseux des itinéraires, etc. J'espère qu'il vous sera utile à tout le monde !

Dans Angular, le routage est basé sur des modules
, et chaque module peut avoir son propre itinéraire. [Recommandations de didacticiel associées : "以模块为单位
的,每个模块都可以有自己的路由。【相关教程推荐:《angular教程》】
快速上手
1、创建页面组件、Layout 组件以及 Navigation 组件,供路由使用
创建首页页面组件ng g c pages/home
创建关于我们页面组件ng g c pages/about
创建布局组件ng g c pages/layout
创建导航组件ng g c pages/navigation
2、创建路由规则
1 2 3 4 5 6 7 8 9 10 11 12 13 | import { Routes } from "@angular/router"
const routes: Routes = [
{
path: "home" ,
component: HomeComponent
},
{
path: "about" ,
component: AboutComponent
}
]
|
Copier après la connexion
3、引入路由模块并启动
1 2 3 4 5 6 7 | import { RouterModule, Routes } from "@angular/router"
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
})
export class AppModule {}
|
Copier après la connexion
4、添加路由插座
1 2 | <!-- 路由插座即占位组件 匹配到的路由组件将会显示在这个地方 -->
<router-outlet></router-outlet>
|
Copier après la connexion
5、在导航组件中定义链接
1 2 | <a routerLink= "/home" >首页</a>
<a routerLink= "/about" >关于我们</a>
|
Copier après la connexion
匹配规则
1、重定向
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | const routes: Routes = [
{
path: "home" ,
component: HomeComponent
},
{
path: "about" ,
component: AboutComponent
},
{
path: "" ,
redirectTo: "home" ,
pathMatch: "full"
}
]
|
Copier après la connexion
2、404 页面
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | const routes: Routes = [
{
path: "home" ,
component: HomeComponent
},
{
path: "about" ,
component: AboutComponent
},
{
path: "**" ,
component: NotFoundComponent
}
]
|
Copier après la connexion
路由传参
1、查询参数
1 | <a routerLink= "/about" [queryParams]= "{ name: 'kitty' }" >关于我们</a>
|
Copier après la connexion
1 2 3 4 5 6 7 8 9 10 11 | import { ActivatedRoute } from "@angular/router"
export class AboutComponent implements OnInit {
constructor( private route: ActivatedRoute) {}
ngOnInit(): void {
this.route.queryParamMap.subscribe(query => {
query.get( "name" )
})
}
}
|
Copier après la connexion
2、动态参数
1 2 3 4 5 6 7 8 9 10 | const routes: Routes = [
{
path: "home" ,
component: HomeComponent
},
{
path: "about/:name" ,
component: AboutComponent
}
]
|
Copier après la connexion
1 | <a [routerLink]= "['/about', 'zhangsan']" >关于我们</a>
|
Copier après la connexion
1 2 3 4 5 6 7 8 9 10 11 | import { ActivatedRoute } from "@angular/router"
export class AboutComponent implements OnInit {
constructor( private route: ActivatedRoute) {}
ngOnInit(): void {
this.route.paramMap.subscribe(params => {
params.get( "name" )
})
}
}
|
Copier après la connexion
路由嵌套
路由嵌套指的是如何定义子级路由
。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const routes: Routes = [
{
path: "about" ,
component: AboutComponent,
children: [
{
path: "introduce" ,
component: IntroduceComponent
},
{
path: "history" ,
component: HistoryComponent
}
]
}
]
|
Copier après la connexion
1 2 3 4 5 6 7 8 9 | <!-- about.component.html -->
<app-layout>
<p>about works!</p>
<a routerLink= "/about/introduce" >公司简介</a>
<a routerLink= "/about/history" >发展历史</a>
<div>
<router-outlet></router-outlet>
</div>
</app-layout>
|
Copier après la connexion
命名插座
将子级路由组件显示到不同的路由插座中。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | {
path: "about" ,
component: AboutComponent,
children: [
{
path: "introduce" ,
component: IntroduceComponent,
outlet: "left"
},
{
path: "history" ,
component: HistoryComponent,
outlet: "right"
}
]
}
|
Copier après la connexion
1 2 3 4 5 6 | <!-- about.component.html -->
<app-layout>
<p>about works!</p>
<router-outlet name= "left" ></router-outlet>
<router-outlet name= "right" ></router-outlet>
</app-layout>
|
Copier après la connexion
1 2 3 4 5 6 7 8 9 10 11 12 | <a
[routerLink]="[
'/about',
{
outlets: {
left: ['introduce'],
right: ['history']
}
}
]"
>关于我们
</a>
|
Copier après la connexion
导航路由
1 2 | <!-- app.component.html -->
<button (click)= "jump()" >跳转到发展历史</button>
|
Copier après la connexion
1 2 3 4 5 6 7 8 9 10 11 12 13 | import { Router } from "@angular/router"
export class HomeComponent {
constructor( private router: Router) {}
jump() {
this.router.navigate([ "/about/history" ], {
queryParams: {
name: "Kitty"
}
})
}
}
|
Copier après la connexion
路由模块
将根模块中的路由配置抽象成一个单独的路由模块,称之为根路由模块
,然后在根模块中引入根路由模块。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | import { NgModule } from "@angular/core"
import { HomeComponent } from "./pages/home/home.component"
import { NotFoundComponent } from "./pages/not-found/not-found.component"
const routes: Routes = [
{
path: "" ,
component: HomeComponent
},
{
path: "**" ,
component: NotFoundComponent
}
]
@NgModule({
declarations: [],
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule]
})
export class AppRoutingModule {}
|
Copier après la connexion
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | import { BrowserModule } from "@angular/platform-browser"
import { NgModule } from "@angular/core"
import { AppComponent } from "./app.component"
import { AppRoutingModule } from "./app-routing.module"
import { HomeComponent } from "./pages/home/home.component"
import { NotFoundComponent } from "./pages/not-found/not-found.component"
@NgModule({
declarations: [AppComponent,HomeComponent, NotFoundComponent],
imports: [BrowserModule, AppRoutingModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
|
Copier après la connexion
路由懒加载
路由懒加载是以模块
为单位的。
1、创建用户模块 ng g m user --routing=true
一并创建该模块的路由模块
2、创建登录页面组件 ng g c user/pages/login
3、创建注册页面组件 ng g c user/pages/register
4、配置用户模块的路由规则
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | import { NgModule } from "@angular/core"
import { Routes, RouterModule } from "@angular/router"
import { LoginComponent } from "./pages/login/login.component"
import { RegisterComponent } from "./pages/register/register.component"
const routes: Routes = [
{
path: "login" ,
component: LoginComponent
},
{
path: "register" ,
component: RegisterComponent
}
]
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class UserRoutingModule {}
|
Copier après la connexion
5、将用户路由模块关联到主路由模块
1 2 3 4 5 6 7 | const routes: Routes = [
{
path: "user" ,
loadChildren: () => import( "./user/user.module" ).then(m => m.UserModule)
}
]
|
Copier après la connexion
6、在导航组件中添加访问链接
1 2 | <a routerLink= "/user/login" >登录</a>
<a routerLink= "/user/register" >注册</a>
|
Copier après la connexion
路由守卫
路由守卫会告诉路由是否允许导航到请求的路由。
路由守方法可以返回 boolean
或 Observable <boolean>
或 Promise <boolean>
,它们在将来的某个时间点解析为布尔值。
1、CanActivate
检查用户是否可以访问某一个路由
。
CanActivate 为接口
,路由守卫类要实现该接口,该接口规定类中需要有 canActivate 方法,方法决定是否允许访问目标路由。
路由可以应用多个守卫
,所有守卫方法都允许,路由才被允许访问,有一个守卫方法不允许,则路由不允许被访问。
创建路由守卫:ng g guard guards/auth
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import { Injectable } from "@angular/core"
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from "@angular/router"
import { Observable } from "rxjs"
@Injectable({
providedIn: "root"
})
export class AuthGuard implements CanActivate {
constructor( private router: Router) {}
canActivate(): boolean | UrlTree {
return this.router.createUrlTree([ "/user/login" ])
return false
return true
}
}
|
Copier après la connexion
1 2 3 4 5 | {
path: "about" ,
component: AboutComponent,
canActivate: [AuthGuard]
}
|
Copier après la connexion
2、CanActivateChild
检查用户是否方可访问某个子路由。
创建路由守卫:ng g guard guards/admin
注意:选择 CanActivateChild,需要将箭头移动到这个选项并且敲击空格确认选择。
1 2 3 4 5 6 7 8 9 10 11 12 | import { Injectable } from "@angular/core"
import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from "@angular/router"
import { Observable } from "rxjs"
@Injectable({
providedIn: "root"
})
export class AdminGuard implements CanActivateChild {
canActivateChild(): boolean | UrlTree {
return true
}
}
|
Copier après la connexion
1 2 3 4 5 6 7 8 9 10 11 | {
path: "about" ,
component: AboutComponent,
canActivateChild: [AdminGuard],
children: [
{
path: "introduce" ,
component: IntroduceComponent
}
]
}
|
Copier après la connexion
3、CanDeactivate
检查用户是否可以退出路由。
比如用户在表单中输入的内容没有保存,用户又要离开路由,此时可以调用该守卫提示用户。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | import { Injectable } from "@angular/core"
import {
CanDeactivate,
ActivatedRouteSnapshot,
RouterStateSnapshot,
UrlTree
} from "@angular/router"
import { Observable } from "rxjs"
export interface CanComponentLeave {
canLeave: () => boolean
}
@Injectable({
providedIn: "root"
})
export class UnsaveGuard implements CanDeactivate<CanComponentLeave> {
canDeactivate(component: CanComponentLeave): boolean {
if (component.canLeave()) {
return true
}
return false
}
}
|
Copier après la connexion
1 2 3 4 5 | {
path: "" ,
component: HomeComponent,
canDeactivate: [UnsaveGuard]
}
|
Copier après la connexion
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | import { CanComponentLeave } from "src/app/guards/unsave.guard"
export class HomeComponent implements CanComponentLeave {
myForm: FormGroup = new FormGroup({
username: new FormControl()
})
canLeave(): boolean {
if (this.myForm.dirty) {
if (window.confirm( "有数据未保存, 确定要离开吗" )) {
return true
} else {
return false
}
}
return true
}
|
Copier après la connexion
4、Resolve
允许在进入路由之前先获取数据,待数据获取完成之后再进入路由。
ng g resolver <name>
Tutoriel angulaire
"]
Démarrez rapidement
1 Créez des composants de page, des composants de mise en page et des composants de navigation pour le routage< br. />- Créer un composant de page Page d'accueil
ng g c pages/home
🎜 - 🎜Créer un composant de page À propos de nous
ng g c pages/about
🎜 - 🎜Créer un composant de Mise en page
ng g c pages/layout
🎜 - 🎜Créer un composant Navigation
ng g c pages/navigation
🎜
🎜 2. Créez des règles de routage🎜
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import { Injectable } from "@angular/core"
import { Resolve } from "@angular/router"
type returnType = Promise<{ name: string }>
@Injectable({
providedIn: "root"
})
export class ResolveGuard implements Resolve<returnType> {
resolve(): returnType {
return new Promise( function (resolve) {
setTimeout(() => {
resolve({ name: "张三" })
}, 2000)
})
}
}
|
Copier après la connexion
🎜3. Présentez le module de routage et démarrez-le🎜
1 2 3 4 5 6 7 | {
path: "" ,
component: HomeComponent,
resolve: {
user: ResolveGuard
}
}
|
Copier après la connexion
🎜4 Ajoutez un
socket de routage
🎜
1 2 3 4 5 6 | export class HomeComponent {
constructor( private route: ActivatedRoute) {}
ngOnInit(): void {
console.log(this.route.snapshot.data.user)
}
}
|
Copier après la connexion
🎜5. Définissez des liens dans le composant de navigation🎜rrreee
Règles de correspondance
🎜
🎜
🎜
1. Redirection🎜rrreee🎜
2. 404 pages 🎜rrreee
Paramètres de routage
🎜
🎜🎜
1. Paramètres de requête🎜rrreeerrreee🎜
2. Paramètres dynamiques🎜rrreeerrreeerrreee
Imbrication d'itinéraire
🎜Comment l'imbrication de routage fait-elle référence à
Définir l'enfant itinéraires
.
🎜rrreeerrreee🎜
Prise nommée🎜
🎜Afficher les composants de routage enfants vers différentes prises de routage au milieu.
🎜rrreeerrreeerrreee
Routage de navigation
rrreeerrreee
Module de routage
🎜Résumer la configuration de routage dans le module racine dans Un module de routage distinct est appelé
module de routage racine
, puis le module de routage racine est introduit dans le module racine.
🎜rrreeerrreee
Chargement paresseux des itinéraires
🎜Le chargement paresseux des itinéraires est basé sur des
modules
.
🎜🎜1. Créez un module utilisateur
ng g m user --routing=true
et créez ensemble le module de routage de ce module 🎜🎜2 Créez un composant de page de connexion
ng g c. user/pages /login
🎜🎜3. Créez le composant de la page d'inscription
ng g c user/pages/register
🎜🎜4. Configurez les règles de routage du module utilisateur🎜rrreee🎜5. le module de routage utilisateur au module de routage principal 🎜rrreee🎜6. Ajoutez des liens d'accès dans le composant de navigation 🎜rrreee
Route guard
🎜
Route guard le fera. indiquer à l'itinéraire s'il faut autoriser la navigation vers le routage de la demande. 🎜🎜La méthode de routage peut renvoyer
boolean
ou
Observable <boolean>
ou
Promise <boolean>
, Ils se résolvent en valeurs booléennes à un moment donné dans le futur. 🎜🎜
1. CanActivate🎜🎜Vérifiez si l'utilisateur
peut accéder à un certain itinéraire
. 🎜🎜CanActivate
est une interface
. La classe route guard doit implémenter cette interface. L'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
plusieurs gardes
. Seulement si toutes les méthodes de garde sont autorisées, l'accès à l'itinéraire est autorisé. Si une méthode de garde n'est pas autorisée, l'accès à l'itinéraire est interdit. 🎜🎜Créer une garde de routage :
ng g guard guards/auth
🎜rrreeerrreee🎜
2. CanActivateChild🎜 🎜
Vérifiez si l'utilisateur peut accéder à un sous-itinéraire. 🎜🎜Créer un garde de route :
ng g guard guards/admin
Remarque : Pour sélectionner CanActivateChild, vous devez déplacer la flèche vers cette option et appuyer sur l'espace pour confirmer la sélection. 🎜rrreeerrree🎜
3. CanDeactivate🎜🎜
Vérifiez si l'utilisateur peut quitter l'itinéraire. 🎜🎜Par exemple, le contenu saisi par l'utilisateur dans le formulaire n'est pas enregistré et l'utilisateur souhaite quitter l'itinéraire. A ce moment, le gardien peut être appelé pour inviter l'utilisateur. 🎜rrreeerrreeerrreee🎜
4. Résoudre🎜🎜
Permet d'obtenir les données avant d'entrer dans l'itinéraire, puis attend jusqu'à ce que les données sont obtenues. Entrez le routage. 🎜🎜
ng g solver <name>
🎜rrreeerrreeerrreee🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Vidéo de 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!