angular - 为什么我们总是要在 AuthGuard 中同时注入(inject) ActivatedRouteSnapshot 和 RouterStateSnapshot

我是 Angular 2 的新手。在 Angular.io 路由教程中，我看到 ActivatedRouteSnapShot 和 RouterStateSnapshot 总是在 AuthGuard 函数中声明(注入(inject)):canActivate、canActivateChild、resolve ....
但是，通常只使用 1。你可以在下面看到:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    let url: string = state.url;

    return this.checkLogin(url);
  }
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<Crisis> {
    let id = route.params['id'];

    return this.cs.getCrisis(id).then(crisis => {
      if (crisis) {
        return crisis;
      } else { // id not found
        this.router.navigate(['/crisis-center']);
        return null;
      }
    });
  }

那么为什么总是需要同时注入(inject)两者呢？

最佳答案

RouteStateSnapshot : RouteStateSnapshot 是一个不可变的数据结构，表示路由器在特定时刻的状态。

RouterStateSnapshot 是 ActivatedRouteSnapshots 的树。

让我们看看这个例子:

当我们导航到“/inbox/33/messages/44”时，路由器将使用 MessageCmp 实例化 ConversationCmp 并相应地构造 RouterStateSnapshot。

现在假设我们导航到不同的 URL:“/inbox/33/messages/45”，

为避免不必要的 DOM 修改，路由会在相应路由的参数发生变化时重用组件。为此，它需要 RouterStateSnapshot，其中 ActivatedRouteSnapshots 树可用作子项。

RouterState :定义屏幕上可见内容的应用程序组件的排列。

ActivatedRoute :提供对 url、params、数据、queryParams 和片段可观察值的访问。

以上两者都类似于它们的快照对应物，除了它们将所有值公开为可观察值，这对于处理随时间变化的值非常有用。

你可以看看下面的网址:

https://vsavkin.com/angular-router-understanding-router-state-7b5b95a12eab