En savoir plus sur le routage dans Angular et comment démarrer rapidement ?

Cet article vous donnera une compréhension approfondie du routage dans Angular, verra comment démarrer rapidement et présentera les règles de correspondance, les paramètres de routage, l'imbrication du routage, les gardes de routage, etc. J'espère qu'il sera utile à tout le monde !

Dans Angular, le routage est basé sur des modules, et chaque module peut avoir son propre routage. [Recommandations de didacticiel associées : "Angular 中，路由是以模块为单位的，每个模块都可以有自己的路由。【相关教程推荐：《angular教程》】

快速上手

创建页面组件、Layout 组件以及 Navigation 组件，供路由使用

• 创建首页页面组件ng g c pages/home

• 创建关于我们页面组件ng g c pages/about

• 创建布局组件ng g c pages/layout

• 创建导航组件ng g c pages/navigation

创建路由规则

// app.module.ts
import { Routes } from "@angular/router"

const routes: Routes = [
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: "about",
    component: AboutComponent
  }
]

引入路由模块并启动

// app.module.ts
import { RouterModule, Routes } from "@angular/router"

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
})
export class AppModule {}

添加路由插座

<!-- 路由插座即占位组件 匹配到的路由组件将会显示在这个地方 -->
<router-outlet></router-outlet>

在导航组件中定义链接

<a routerLink="/home">首页</a>
<a routerLink="/about">关于我们</a>

匹配规则

1、重定向

const routes: Routes = [
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: "about",
    component: AboutComponent
  },
  {
    path: "",
    // 重定向
    redirectTo: "home",
    // 完全匹配
    pathMatch: "full"
  }
]

2、<span style="font-size: 16px;">404</span> 页面

const routes: Routes = [
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: "**",
    component: NotFoundComponent
  }
]

路由传参

1、查询参数

<a routerLink="/about" [queryParams]="{ name: &#39;kitty&#39; }">关于我们</a>

import { ActivatedRoute } from "@angular/router"

export class AboutComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.queryParamMap.subscribe(query => {
      query.get("name")
    })
  }
}

2、动态参数

const routes: Routes = [
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: "about/:name",
    component: AboutComponent
  }
]

<a [routerLink]="[&#39;/about&#39;, &#39;zhangsan&#39;]">关于我们</a>

import { ActivatedRoute } from "@angular/router"

export class AboutComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      params.get("name")
    })
  }
}

路由嵌套

路由嵌套指的是如何定义子级路由

const routes: Routes = [
  {
    path: "about",
    component: AboutComponent,
    children: [
      {
        path: "introduce",
        component: IntroduceComponent
      },
      {
        path: "history",
        component: HistoryComponent
      }
    ]
  }
]

<!-- 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>

命名插座

将子级路由组件显示到不同的路由插座中

{
  path: "about",
  component: AboutComponent,
  children: [
    {
      path: "introduce",
      component: IntroduceComponent,
      outlet: "left"
    },
    {
      path: "history",
      component: HistoryComponent,
      outlet: "right"
    }
  ]
}

<!-- about.component.html -->
<app-layout>
  <p>about works!</p>
  <router-outlet name="left"></router-outlet>
  <router-outlet name="right"></router-outlet>
</app-layout>

<a
    [routerLink]="[
      &#39;/about&#39;,
      {
        outlets: {
          left: [&#39;introduce&#39;],
          right: [&#39;history&#39;]
        }
      }
    ]"
>关于我们</a>

导航路由

<!-- app.component.html -->
<button (click)="jump()">跳转到发展历史</button>

// app.component.ts
import { Router } from "@angular/router"

export class HomeComponent {
  constructor(private router: Router) {}
  jump() {
    this.router.navigate(["/about/history"], {
      queryParams: {
        name: "Kitty"
      }
    })
  }
}

路由模块

将根模块中的路由配置抽象成一个单独的路由模块，称之为根路由模块，然后在根模块中引入根路由模块

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 })],
  // 导出 Angular 路由功能模块，因为在根模块的根组件中使用了 RouterModule 模块中提供的路由插座组件
  exports: [RouterModule]
})
export class AppRoutingModule {}

import { BrowserModule } from "@angular/platform-browser"
import { NgModule } from "@angular/core"
import { AppComponent } from "./app.component"
import { AppRoutingModule } from "./app-routing.module"

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

路由懒加载

路由懒加载是以模块为单位的。

• 创建用户模块 ng g m user --routing=true 并创建该模块的路由模块

• 创建登录页面组件 ng g c user/pages/login

• 创建注册页面组件 ng g c user/pages/register

• 配置用户模块的路由规则

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 {}

• 将用户路由模块关联到主路由模块

  // app-routing.module.ts
  const routes: Routes = [
    {
      path: "user",
      loadChildren: () => import("./user/user.module").then(m => m.UserModule)
    }
  ]

• 在导航组件中添加访问链接

  <a routerLink="/user/login">登录</a>
  <a routerLink="/user/register">注册</a>

路由守卫

路由守卫会告诉路由是否允许导航到请求的路由。

路由守方法可以返回 boolean 或 Observable <boolean> 或 Promise <boolean>，它们在将来的某个时间点解析为布尔值

1、<span style="font-size: 16px;">CanActivate</span>

检查用户是否可以访问某一个路由。

CanActivate 为接口，路由守卫类要实现该接口，该接口规定类中需要有 canActivate 方法，方法决定是否允许访问目标路由。

路由可以应用多个守卫，所有守卫方法都允许，路由才被允许访问，有一个守卫方法不允许，则路由不允许被访问。

创建路由守卫：ng g guard guards/auth

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
  }
}

{
  path: "about",
  component: AboutComponent,
  canActivate: [AuthGuard]
}

2、<span style="font-size: 16px;">CanActivateChild</span>

检查用户是否方可访问某个子路由。

创建路由守卫：ng g guard guards/admin

注意：选择 CanActivateChild，需要将箭头移动到这个选项并且敲击空格确认选择

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
  }
}

{
  path: "about",
  component: AboutComponent,
  canActivateChild: [AdminGuard],
  children: [
    {
      path: "introduce",
      component: IntroduceComponent
    }
  ]
}

3、<span style="font-size: 16px;">CanDeactivate</span>

检查用户是否可以退出路由。比如用户在表单中输入的内容没有保存，用户又要离开路由，此时可以调用该守卫提示用户

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
  }
}

{
  path: "",
  component: HomeComponent,
  canDeactivate: [UnsaveGuard]
}

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
  }

4、<span style="font-size: 16px;">Resolve</span>Tutoriel angulaire"]

Démarrez rapidement

Créez des composants de page, des composants Mise en page et une Navigation composants , pour le routage, utilisez

• CréerPage d'accueilComposant de pageng g c pages/home

< li>🎜Créerà propos de nous🎜un composant de pageng g c pages/about🎜
• 🎜créerlayout🎜componentng g c pages/layout< / code>🎜</li><li>🎜Créer<strong>Navigation🎜component<code>ng g c pages/navigation🎜

🎜Créer des règles de routage🎜

$ ng g resolver <name>

🎜Introduire le module de routage et démarrez 🎜

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)
    })
  }
}

🎜Ajouter une sortie de routage🎜

{
   path: "",
   component: HomeComponent,
   resolve: {
     user: ResolveGuard
   }
}

🎜Définir les liens dans le composant de navigation🎜

export class HomeComponent {
  constructor(private route: ActivatedRoute) {}
  ngOnInit(): void {
    console.log(this.route.snapshot.data.user)
  }
}

Règles de correspondance

🎜1 Redirection🎜🎜rrreee🎜2 <span style="font-size: 16px;">404</span> Page🎜🎜rrreee

Paramètres d'itinéraire

1. Paramètres de requête🎜

rrreeerrreee🎜2. Paramètres dynamiques span>🎜🎜rrreeerrrreeerrreee

Imbrication de routes🎜

🎜L'imbrication de routes fait référence à la manière de définir des routes enfants🎜rrreeerrreee

Sockets nommés

🎜Afficher les composants de routage enfants dans différentes sockets de routage 🎜 rrreeerrreeerrreee

Routage de navigation 🎜

rrreeerrreee

Module de routage 🎜

🎜 résume la configuration de routage dans le module racine dans un module de routage distinct, appelez-le le module de routage racine, puis introduisez le module de routage racine dans le module racine🎜rrreeerrreee

Chargement paresseux des routes

🎜Le chargement paresseux des routes est basé sur des modules. 🎜

• 🎜Créez le module utilisateur ng g m user --routing=true et créez le module de routage de ce module🎜
• 🎜Créez le composant de la page de connexionng g c user/pages/login🎜
• 🎜Créez le composant de la page d'inscriptionng g c user/pages/register code>🎜
• 🎜Configurer les règles de routage du module utilisateur🎜

rrreee

• 🎜Associer le module de routage utilisateur au module de routage principal 🎜rrreee
• 🎜Ajouter des liens d'accès dans le composant de navigation🎜rrreee

Route Guard

🎜Route Guard dira au route si la navigation vers la demande est autorisée. 🎜🎜Les méthodes de routage peuvent renvoyer boolean ou Observable <boolean> ou Promise <boolean> à un moment donné dans le futur. Analysé comme un booléen valeur 🎜🎜1, <span style="font-size: 16px;">CanActivate</span> 🎜🎜🎜 Vérifiez si l'utilisateur peut accéder à un certain itinéraire. 🎜🎜CanActivate est une interface, et 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. à l'itinéraire cible. 🎜🎜Plusieurs gardes peuvent être appliqués à un itinéraire. Ce n'est que si toutes les méthodes de garde sont autorisées que 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. <span style="font-size: 16px;">CanActivateChild</span>🎜🎜🎜Vérifiez si l'utilisateur peut accéder à une certaine sous-route. 🎜🎜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🎜

rrreeerrreee🎜3. <span style="font-size: 16px;">CanDeactivate </span>🎜🎜🎜 Vérifiez 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 inviter l'utilisateur🎜rrreeerrreeerrreee🎜<strong><span style="font-size: 16px ;">4.</span> <code><span style="font-size: 16px;">Résoudre</span>🎜🎜🎜vous permet d'obtenir des données avant de saisir l'itinéraire, puis de saisir l'itinéraire une fois l'acquisition des données terminée🎜rrreeerrreeerrreeerrreee🎜Plus Pour des connaissances liées à 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!