深入了解Angular中的路由，如何快速上手？

在 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.tsimport {
 Routes }
 From "@angular/router"const routes: Routes = [  {
    path: "home",    component: HomeComponent  }
,  {
    path: "about",    component: AboutComponent  }
    ]

引入路由模块并启动

// app.module.tsimport {
 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、404 页面

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

路由传参

1、查询参数

a routerLink="/about" [queryParams]="{
 name: 'kITty' }
    ">
    关于我们/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]="['/about', 'zhangsan']">
    关于我们/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]="[      '/about',      {
        outlets: {
          left: ['introduce'],          right: ['history']        }
      }
        ]">
    关于我们/a>
    

导航路由

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

// app.component.tsimport {
 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.tsconst 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、CanActivate

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

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、CanActivateChild

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

创建路由守卫：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、CanDeactivate

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

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 CanDeactivateCanComponentLeave>
 {
  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、Resolve

允许在进入路由之前先获取数据，待数据获取完成之后再进入路由

$ ng g resolver name>
    

import {
 Injectable }
 from "@angular/core"import {
 Resolve }
 from "@angular/router"tyPE returnType = Promise{
 name: string }
    >
@Injectable({
  providedIn: "root"}
    )export class ResolveGuard implements ResolvereturnType>
 {
  resolve(): returnType {
    return new Promise(function (resolve) {
          setTimeout(() =>
 {
        resolve({
 name: "张三" }
)      }
, 2000)    }
)  }
}
    

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

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

更多编程相关知识，请访问：编程视频！！

以上就是深入了解Angular中的路由，如何快速上手？的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！