angular基础12【路由】_angular 路由

12.1 概述

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

12.2 快速上手

1. 创建页面组件、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

2. 创建路由规则

   // app.module.ts
   import { Routes } from "@angular/router"
   
   const routes: Routes = [
     {
       path: "home",
       component: HomeComponent
     },
     {
       path: "about",
       component: AboutComponent
     }
   ]
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13

3. 引入路由模块并启动

   // app.module.ts
   import { RouterModule, Routes } from "@angular/router"
   
   @NgModule({
     imports: [RouterModule.forRoot(routes, { useHash: true })],
   })
   export class AppModule {}
   1
   2
   3
   4
   5
   6
   7

4. 添加路由插座

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

5. 在导航组件中定义链接

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

12.3 匹配规则

12.3.1 重定向

const routes: Routes = [
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: "about",
    component: AboutComponent
  },
  {
    path: "",
    // 重定向
    redirectTo: "home",
    // 完全匹配
    pathMatch: "full"
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

12.3.2 404 页面

const routes: Routes = [
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: "about",
    component: AboutComponent
  },
  {
    path: "**",
    component: NotFoundComponent
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

12.4 路由传参

12.4.1 查询参数

/about?name=kitty
1

<a routerLink="/about" [queryParams]="{ name: 'kitty' }">关于我们</a>
1

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"]
    });
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

12.4.2 动态参数

const routes: Routes = [
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: "about/:name",
    component: AboutComponent
  }
]
1
2
3
4
5
6
7
8
9
10

<a [routerLink]="['/about', 'zhangsan']">关于我们</a>
1

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"]
    });
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

12.5 路由嵌套

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

const routes: Routes = [
  {
    path: "about",
    component: AboutComponent,
    children: [
      {
        path: "introduce",
        component: IntroduceComponent
      },
      {
        path: "history",
        component: HistoryComponent
      }
    ]
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!-- 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>
1
2
3
4
5
6
7
8
9

12.6 命名插座

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

{
  path: "about",
  component: AboutComponent,
  children: [
    {
      path: "introduce",
      component: IntroduceComponent,
      outlet: "left"
    },
    {
      path: "history",
      component: HistoryComponent,
      outlet: "right"
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!-- about.component.html -->
<app-layout>
  <p>about works!</p>
  <router-outlet name="left"></router-outlet>
  <router-outlet name="right"></router-outlet>
</app-layout>
1
2
3
4
5
6

<a
    [routerLink]="[
      '/about',
      {
        outlets: {
          left: ['introduce'],
          right: ['history']
        }
      }
    ]"
    >关于我们
</a>
1
2
3
4
5
6
7
8
9
10
11
12

12.7 导航路由

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

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

export class HomeComponent {
  constructor(private router: Router) {}
  jump() {
    this.router.navigate(["/about/history"], {
      queryParams: {
        name: "Kitty"
      }
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

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 {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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 {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

12.9 路由懒加载

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

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

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

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

4. 配置用户模块的路由规则

   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 {}
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21

5. 将用户路由模块关联到主路由模块

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

{
  path: "about",
  component: AboutComponent,
  canActivate: [AuthGuard]
}
1
2
3
4
5

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
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

{
  path: "about",
  component: AboutComponent,
  canActivateChild: [AdminGuard],
  children: [
    {
      path: "introduce",
      component: IntroduceComponent
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11

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
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

{
  path: "",
  component: HomeComponent,
  canDeactivate: [UnsaveGuard]
}
1
2
3
4
5

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
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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)
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

{
   path: "",
   component: HomeComponent,
   resolve: {
     user: ResolveGuard
   }
}
1
2
3
4
5
6
7

export class HomeComponent {
  constructor(private route: ActivatedRoute) {}
  ngOnInit(): void {
    console.log(this.route.snapshot.data.user)
  }
}
1
2
3
4
5
6

12.11 Router 和 ActivatedRoute 的区别

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

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

12.11.1 Router

12.11.1.1 navigate

1. 以根路由跳转/login

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

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

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

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

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

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

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

5. 路由中锚点跳转 /home#top

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

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

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

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

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

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

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

12.11.1.2 navigateByUrl

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

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

12.11.1.3 url

当前 url

this.router.url;
1

12.11.1.4 parseUrl

把 URL 字符串解析为 UrlTree 对象

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

12.11.1.5 events

路由的监听事件

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

12.11.2 ActivatedRoute

12.11.2.1 queryParams & params

• 获取查询参数

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

• 获取动态参数

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

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}
}
1
2
3
4
5
6

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