常用类
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;
}
}
