Angular 路由

概述

路由所要解决的核心问题就是通过建立URL和页面的对应关系，使得不同的页面可以用不同的URL来表示。

Angular路由的核心工作流程图

• 首先，当用户在浏览器上输入URL后，Angular将获取该URL并将其解析生成一个UrlTree实例
• 其次，在路由配置中寻找并激活与UrlTree实例匹配的配置项
• 再次，为配置项中指定的组件创建实例
• 最后，将该组件渲染于路由组件的模板中<router-outlet>指令所在的位置

基本用法

Angular路由最为基本的用法是将一个URL所对应的组件在页面中显示出来。要做到这一点，有三个必不可少的步骤，分别是创建根路由模块、定义路由配置、添加<router-outlet>指令标签。

创建根路由模块

根路由模块包含了路由所需要的各项服务，是路由工作流程得以正常执行的基础。

下面的代码以路由配置rootRouterConfig为参数，通过调用RouterModule.forRoot()方法来创建根路由模块，并将其导入到应用的根模块AppModule中。

app-routing.module.ts

const rootRouterConfig: Routes = [
  {
    path: 'add',
    component: AddComponent,
  },
  {
    path: 'list',
    component: ListComponent,
  },
  {
    path: '',
    redirectTo: 'add',
    pathMatch: 'full',
  },
  {
    path: '**',
    redirectTo: 'add',
    pathMatch: 'full',
  }
];

@NgModule({
  imports: [RouterModule.forRoot(rootRouterConfig)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

• path 不能以斜杠 / 开头
• ** 通配符路由，不满足以上路径时，选择此路由

路由策略

HashLocationStrategy

http://localhost:4200/#/add

HashLocationStrategy是Angular路由最为常见的策略，其原理是利用了浏览器在处理hash部分的特性

浏览器向服务器发送请求时不会带上hash部分的内容，更换URL的hash部分不会向服务器重新发送请求，这使得在进行跳转的时候不会引发页面的刷新和应用的重新加载

使用该策略，只需要在注入路由服务时使用useHash属性进行显示指定即可

app-routing.module.ts

@NgModule({
  imports: [RouterModule.forRoot(rootRouterConfig, { useHash: true })],
  exports: [RouterModule]
})

HashLocationStrategy

路由跳转

Web应用中的页面跳转，指的是应用响应某个事件，从一个页面跳转到另一个页面的行为。对于Angular构建的单页面而言，页面跳转实质上就是从一个配置项跳转到另一个配置项的行为。

指令跳转

指令跳转通过使用RouterLink指令来完成，该指令接收一个链接参数数组，Angular将根据该数组生成UrlTree实例进行跳转

<div [routerLink]="['/add']" routerLinkActive="add" >add</div>
<div [routerLink]="['/list']" routerLinkActive="list" >list</div>

第一个参数名可以使用 /、./ 或 ../ 前缀

• 如果第一个片段用 / 开头，则路由器会从应用的根路由开始查找
• 如果第一个片段用 ./ 开头或者没有用斜杠开头，路由器就会从当前激活路由开始查找
• 如果第一个片段以 ../ 开头，则路由器将会向上找一级

RouterLink指令可以被应用到任何HTML元素上，使得页面跳转不需要依赖超链接。

代码跳转

RouterLink指令通过响应click事件实现页面跳转，如果需要响应其他事件或者根据运行时动态跳转，则可以通过Router.navigateByUrl或Router.navigate来完成。

add() {
    this.router.navigateByUrl('/add');
}

list() {
    this.router.navigate(['/list']);
}

路由参数

Path参数

Path参数通过解析URL的path部分来获取参数。

在定义一个配置项的path属性时，可以使用/字符来对path属性进行分段，如果一个分段以:字符开头，则URL中与该分段进行匹配的部分将作为参数传递给组件中。

app-routing.module.ts

const rootRouterConfig: Routes = [
  {
    path: 'add/:id/:name/:age/:sex',
    component: DetailComponent,
  }
];

<div [routerLink]="['detail', 1, 'tao', 30, 'man']"
     routerLinkActive="detail">detail 1 tao1 30 man</div>

在组件中获取Path参数，需要导入ActivatedRoute服务，该服务提供了两种方式处理页面之间的跳转。

不同页面

Angular应用从一个页面跳转到另一个新的页面，实质就是从一个配置项跳转到另一个配置项。在这个过程中，Angular除了会为配置项所对应的组件创建实例外，还会为该配置项创建一个ActivatedRoute实例来表示该配置项已被激活，该ActivatedRoute实例包含一个快照(snapshot)，记录了从当前URL解析出来的所有path参数。

ngOnInit() {
    console.log(this.activatedRouter.snapshot.params);
  }

{id: "1", name: "tao", age: "30", sex: "man"}

同一页面

Angular在处理同一页面时，不会重现创建组件的实例，所以构造函数和ngOnInit()方法不会被调用。虽然Angular会将快照中参数更新，但是没有将值更新到组件。为了解决这个问题，ActivatedRoute服务提供了一个Observable对象，允许对参数的更新进行订阅。组件销毁的时候要取消订阅。

this.activatedRouter.params.subscribe(value => {
      console.log(value)；
})

ngOnDestroy() {
    this.sub.unsubscribe();
}

Query参数

由于URL的query部分不用和配置项进行匹配，因此每一个配置项可以拥有任意多个查询参数。

http://localhost:4200/list?limit=10

Query参数同样可以通过RouterLink指令或者跳转方法来赋值

<div [routerLink]="['detail']" [queryParams]="{'limit': 10}">>detail limit 10</div>
<div [routerLink]="['detail']" [queryParams]="{'limit': 10}">>detail limit 30</div>

Query参数的获取，需要借助ActivatedRoute服务提供的Observable对象的queryParams来完成。

this.sub2 = this.activatedRouter.queryParams.subscribe(value => {
      console.log(value);
    })

// {limit: "10"}

路由拦截