likes
comments
collection
share

Angular Router中的常用类

作者站长头像
站长
· 阅读数 92

Angular Router

常用类

Angular Router模块提供了几个重要的类来处理路由信息。以下是一些常用的类：

  1. Router：Router是Angular Router模块中最重要的类之一。它提供了导航和路由操作的方法，用于在应用程序中执行导航到不同路由的操作。你可以使用navigate方法来导航到指定的路由，使用navigateByUrl方法根据URL字符串进行导航，以及使用其他方法来处理路由事件和访问当前的路由状态。
  2. ActivatedRoute：ActivatedRoute代表当前激活的路由，它提供了对当前路由信息的访问。通过注入ActivatedRoute服务，你可以获取当前路由的参数、查询参数、URL路径等信息。你还可以通过params属性和queryParams属性来订阅参数和查询参数的变化。
  3. RouterState和RouterStateSnapshot：RouterState表示整个应用程序的路由状态，是一个树状结构，包含了所有活动的路由。它提供了对整体路由状态的访问和导航的方法。RouterStateSnapshot是RouterState的快照，表示在特定时间点应用程序的路由状态。你可以通过注入RouterState或RouterStateSnapshot服务来访问当前的路由状态。
  4. UrlTree：UrlTree是一个树状数据结构，用于处理和操作URL。它提供了一些方法，例如parseUrl用于解析URL字符串，serializeUrl用于将URL树序列化为字符串，以及其他方法用于处理URL的各个部分。
  5. ActivatedRouteSnapshot和RouteSnapshot：ActivatedRouteSnapshot是ActivatedRoute的快照，表示在特定时间点激活的路由状态的快照。它是不可变的，并提供了访问路由信息的方法。RouteSnapshot是Route的快照，表示在特定时间点定义的路由配置的快照。它提供了对路由配置信息的访问，例如路由路径、路由参数、路由守卫等。

这些类是Angular Router模块中的核心类，用于处理和操作路由信息。通过使用它们，你可以实现导航、访问路由状态、处理参数和查询参数等功能，从而构建灵活和强大的路由功能。

类之间的关系

ActivatedRoute RouterState UrlTree 这三个类之间的关系：

  1. 当用户导航到某个路由时，ActivatedRoute会被更新为当前激活的路由信息。你可以通过注入ActivatedRoute服务来获取当前路由的信息，例如路由参数和查询参数。
  2. RouterState是一个树状结构，代表整个应用程序的路由状态。它包含了所有活动路由的快照，其中每个节点都是一个ActivatedRoute实例。你可以通过注入Router服务来获取当前的路由状态，以及对其进行导航和操作。
  3. UrlTree用于处理和解析URL，并提供了一些方法来操作URL。Router服务使用UrlTree来处理导航请求，将其与路由配置进行匹配，并最终更新RouterState和ActivatedRoute。

ActivatedRoute用于表示当前激活的路由，RouterState代表整个应用程序的路由状态，而UrlTree用于处理和解析URL。它们之间密切相关，并在Angular的路由系统中发挥着重要的作用。

ActivatedRouteSnapshot 和 RouterStateSnapshot

除了ActivatedRoute和RouterState，还有两个相关的类：ActivatedRouteSnapshot和RouterStateSnapshot。

ActivatedRouteSnapshot是ActivatedRoute的快照，它表示在特定时间点激活的路由状态。它包含了与该路由关联的所有信息，例如路由参数、查询参数、路由路径等。ActivatedRouteSnapshot是一个不可变对象，可以用于查看和检查特定路由的状态信息，但不能对其进行修改。

RouterStateSnapshot是RouterState的快照，表示在特定时间点应用程序的路由状态。它是一个树状结构，每个节点都是一个ActivatedRouteSnapshot实例，代表一个活动的路由快照。与RouterState类似，RouterStateSnapshot也是不可变的，可以用于查看应用程序的路由状态，但不能对其进行修改。

这两个快照类在路由导航期间起着重要作用：

  • 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.navigate(['/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); // 检查当前URL
    return true;
  }
}
转载自:https://juejin.cn/post/7244604894408802360
评论
请登录