angular基础12【路由】

一天一丢丢

已于 2022-07-16 11:46:49 修改

阅读量1.8k

点赞数 1

分类专栏： angular 文章标签： angular

于 2021-12-26 18:10:58 首次发布

本文链接：https://blog.csdn.net/letianxf/article/details/122158350

版权

angular 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文详细介绍了Angular的路由系统，包括模块路由、快速入门、匹配规则、路由参数、路由嵌套、命名插座、导航路由、路由模块、路由懒加载和路由守卫。讲解了如何创建组件、配置路由规则、实现404页面、传递参数、使用路由守卫进行权限控制以及实现路由懒加载，帮助开发者深入理解Angular路由的各个方面。

摘要由CSDN通过智能技术生成

12.1 概述

在 Angular 中，路由是以模块为单位的，每个模块都可以有自己的路由。

12.2 快速上手

创建页面组件、Layout 组件以及 Navigation 组件，供路由使用
1. 创建首页页面组件ng g c pages/home
2. 创建关于我们页面组件ng g c pages/about
3. 创建布局组件ng g c pages/layout
4. 创建导航组件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>

12.3 匹配规则

12.3.1 重定向

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

12.3.2 404 页面

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

12.4 路由传参

12.4.1 查询参数

/about?name=kitty

<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")
    });
    
    this.route.queryParams.subscribe(query => {
      query["name"]
    });
  }
}

12.4.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")
    });
    
    this.route.params.subscribe(params => {
      params["name"]
    });
  }
}

12.5 路由嵌套

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

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>

12.6 命名插座

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

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

12.7 导航路由

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

12.8 路由模块

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

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

12.9 路由懒加载

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

创建用户模块 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>

12.10 路由守卫

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

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

12.10.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]
}

12.10.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
    }
  ]
}

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

12.10.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 Resolve<returnType> {
  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)
  }
}

12.11 Router 和 ActivatedRoute 的区别

Router：负责在运行时执行路由的对象，可以通过调用其 navigate() 和 navigateByUrl() 方法来导航到一个指定的路由
ActivatedRoute：当前激活的路由对象，保存着当前路由的信息，如路由地址，路由参数等

所以最大的区别我认为就是作用域不同，一个是在获取当前路由的信息，另一个则是对全局路由操作跳转。

12.11.1 Router

12.11.1.1 navigate

以根路由跳转/login

this.router.navigate(['login']);

设置relativeTo相对当前路由跳转，route是ActivatedRoute的实例，使用需要导入ActivatedRoute

this.router.navigate(['login', 1],{relativeTo: route});

路由中传参数 /login?name=1

this.router.navigate(['login', 1],{ queryParams: { name: 1 } });

preserveQueryParams默认值为false，设为true，保留之前路由中的查询参数/login?name=1 to /home?name=1

this.router.navigate(['home'], { preserveQueryParams: true });

路由中锚点跳转 /home#top

this.router.navigate(['home'],{ fragment: 'top' });

preserveFragment默认为false，设为true，保留之前路由中的锚点/home#top to /role#top

this.router.navigate(['/role'], { preserveFragment: true });

skipLocationChange默认为false，设为true，路由跳转时浏览器中的url会保持不变，但是传入的参数依然有效

this.router.navigate(['/home'], { skipLocationChange: true });

replaceUrl默认为true，设为false，路由不会进行跳转

this.router.navigate(['/home'], { replaceUrl: true });

12.11.1.2 navigateByUrl

基于所提供的URL进行导航，必须使用绝对路径

this.router.navigateByUrl('/home');

12.11.1.3 url

当前 url

this.router.url;

12.11.1.4 parseUrl

把 URL 字符串解析为 UrlTree 对象

this.router.parseUrl(this.router.url).queryParams['id'];

12.11.1.5 events

路由的监听事件

事件名称	触发条件
NavigationStart	在导航开始时触发
RouteConfigLoadStart	会在Router惰性加载，某个路由配置之前触发
RouteConfigLoadEnd	会在Router惰性加载，某个路由配置之后触发
RoutesRecognized	事件会在路由器解析完URL的时候去识别相应的路由时触发
GuardsCheckStart	事件会在路由器开始Guard阶段之前触发
ChildActivationStart	事件会在路由器开始激活路由的子路由时触发
ActivationStart	事件会在路由器开始激活某个路由时触发
GuardsCheckEnd	事件会在路由器成功完成了Guard阶段时触发
ResolveStart	事件会在Router开始解析(Resolve)阶段时触发
ResolveEnd	事件会在路由器成功完成了路由的解析（Resolve）阶段时触发
ChildActivationEnd	事件会在路由器激活了路由的子路由时触发
ActivationEnd	事件会在路由器激活某个路由时触发
NavigationEnd	事件会在导航成功结束之后触发
NavigationCancel	事件在导航被取消之后触发
NavigationError	事件会在导航发生错误时触发
Scroll	事件代表的一个滚动事件

this.router.events.pipe(filter((event: any) => event instanceof NavigationEnd)).subscribe(() => {
});

12.11.2 ActivatedRoute

12.11.2.1 queryParams & params

获取查询参数

this.route.queryParams.subscribe(query => {
    query["name"]
});

获取动态参数

this.route.params.subscribe(params => {
    params["name"]
});

12.11.2.2 snapshot

当前路由规则的快照，可以通过此快照获取params, queryParams

12.11.2.3 data

获取路由Routes规则中的data数据，resolve中的数据

{
    path: 'access',
    component: TestComponent,
    data: { animation: 'access' },
    resolve： {test: TestService}
}

this.route.data.subscribe(res => console.log(res))