Question

我是Angular 2中的新手。在Angular.io路由教程中，我看到ActivatedRouteSnapShot和RouterStateSnapshot总是在AuthGuard函数中声明（注入）：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;
      }
    });
  }

那为什么总是需要注射两者？

Answer 1

canActivate方法具有这些参数，因为您实现了CanActivate接口，这是一个所谓的Guard。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean;

因此，无论您是否需要它，您都可以使用它，Angular在调用方法时会提供它们。

对于resolve方法，情况是相同的，您实现了Resolve接口，您必须在其中实现resolve方法：

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<T> | Promise<T> | T;

接口是合同，因此是不可协商的。

Answer 2

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

为什么我们总是要在AuthGuard中注入ActivatedRouteSnapshot和RouterStateSnapshot

2 个答案: