Angular路由常用类详解

常用类

Angular Router 模块中，核心类用于处理路由信息，直接给出结论——以下这几个最为关键：

• Router：作为整个路由模块的“交通指挥中心”，它提供导航与路由操作的系列方法。例如通过 navigate 跳转至指定路由，使用 navigateByUrl 基于 URL 字符串进行导航，同时还能处理路由事件、访问当前路由状态。
• ActivatedRoute：代表当前激活的路由。注入该服务后，即可获取当前路由的参数、查询参数、URL 路径等信息。借助 params 与 queryParams 属性，还可订阅参数的变化。
• RouterState 和 RouterStateSnapshot：RouterState 是应用路由状态的“全景地图”，呈树状结构，包含所有活动路由。RouterStateSnapshot 则是某一时间点的快照，不可变，适合用于状态检查或比较。
• UrlTree：一种树状数据结构，负责 URL 的解析与操作。例如 parseUrl 解析 URL 字符串，serializeUrl 将 URL 树序列化为字符串，还有处理 URL 各部分的方法。
• ActivatedRouteSnapshot 和 RouteSnapshot：ActivatedRouteSnapshot 是 ActivatedRoute 在某一时刻的快照，不可变，用于访问路由参数、查询参数、路由路径等。RouteSnapshot 则是 Route 的快照，包含路由配置信息（如路径、参数、守卫等）。

可以说，这些类构成了 Angular 路由的核心骨架。熟练使用它们，导航、路由状态访问、参数处理等功能便能信手拈来。

类之间的关系

来看 ActivatedRoute、RouterState 和 UrlTree 三者如何协同工作：

• 用户导航到某个路由时，ActivatedRoute 会立即更新为当前激活的路由信息。注入 ActivatedRoute 服务，就能获取路由参数和查询参数。
• RouterState 是一棵“路由状态树”，每个节点对应一个 ActivatedRoute 实例。通过注入 Router 服务，可以获取当前路由状态，并执行导航与操作。
• UrlTree 专门用于 URL 解析与操作。Router 服务利用它处理导航请求、匹配路由配置，最终更新 RouterState 和 ActivatedRoute。

简单总结：ActivatedRoute 是“当前页”，RouterState 是“整棵路由树”，UrlTree 是“URL 解析器”。三者环环相扣，缺一不可。

ActivatedRouteSnapshot 和 RouterStateSnapshot

除上述动态类外，还有两个“快照”类值得关注：ActivatedRouteSnapshot 和 RouterStateSnapshot。

ActivatedRouteSnapshot 是 ActivatedRoute 在特定时间点的“定格照”，包含路由参数、查询参数、路径等全部信息。由于其不可变特性，适合用于状态检查，而不能修改。

RouterStateSnapshot 是 RouterState 的“全景快照”，同样呈树状结构，每个节点是一个 ActivatedRouteSnapshot 实例。它也不可变，适用于查看应用的路由状态。

这两个快照类在路由导航期间非常实用：

• ActivatedRouteSnapshot 用于获取当前激活路由的静态副本，可通过注入 ActivatedRouteSnapshot 服务来使用。
• RouterStateSnapshot 用于获取整体路由状态的静态副本，注入 RouterStateSnapshot 服务即可。

说白了，快照类的作用是保留路由状态的“静态切片”，方便在导航过程中进行比较或守卫检查。例如在导航发生前获取当前状态，比较前后差异等。

使用示例

import { ActivatedRoute, Router, RouterState, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
@Component({...})
export class MyComponent {
  constructor(
    private route: ActivatedRoute,
    private router: Router,
  ) {}
  ngOnInit() {
    // 使用 ActivatedRoute 和 ActivatedRouteSnapshot 获取当前路由参数
    this.route.params.subscribe(params => {
      console.log(params);
    });
    const currentActivatedRouteSnapshot: ActivatedRouteSnapshot = this.route.snapshot;
    console.log(currentActivatedRouteSnapshot.params);
    // 使用 Router 和 RouterState 进行导航和操作路由状态
    this.router.na vigate(['/new-route']);
    const currentState: RouterState = this.router.routerState;
    console.log(currentState);
    const routerStateSnapshot: RouterStateSnapshot = currentState.snapshot;
    console.log(routerStateSnapshot);
  }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    console.log(route.params);
    console.log(state.url);
    return true;
  }
}