likes
comments
collection
share

Angular Router中的常用类

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

Angular Router

常用类

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

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

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

类之间的关系

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

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

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

ActivatedRouteSnapshot 和 RouterStateSnapshot

除了ActivatedRouteRouterState,还有两个相关的类:ActivatedRouteSnapshotRouterStateSnapshot

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

RouterStateSnapshotRouterState的快照,表示在特定时间点应用程序的路由状态。它是一个树状结构,每个节点都是一个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;
  }
}