Angular2 将数据从 CanActivate 守卫传递到 Resolve 解析器？

Question

在导航到组件之前，我一直在使用 Resolve 通过 HTTP 调用从远程源预加载一些数据。现在我需要实现一些保护逻辑，这需要根据某些条件预加载数据以针对当前用户验证其中的某些字段。

我想避免在 CanActivate 守卫中向后端发出完全相同的请求，然后立即在 Resolve 中发出完全相同的请求。

有什么方法可以让我从 CanActivate 或路由配置中访问路由数据，以临时覆盖解析器并只在数据对象上设置值，因为我已经得到了我的'我要申请了吗？

我尝试过一些简单的事情

route.data['myData'] = value;

但这是一个错误，因为“对象不可扩展”。

我也尝试过类似的东西:

this.router.routerState.root.data['myData'] = value;

这没有产生任何错误，但是数据没有保存到 Resolve.resolve() 方法的 route.data 元素中。

我想避免一些过于自定义或 hacky 的东西，比如像某种缓存一样将对象临时存储在服务上。是否有任何标准机制可在内部路由器元素之间传输数据以支持高级预取和数据所有权检查等内容？

编辑如果您将 Router 注入(inject)到 Resolve 类的构造函数中，并以相同的方式访问它，则 routerState 确实有效。但这需要在之后清除，否则它会在导航调用之间持续存在。

Answer 1

ActivatedRouteSnapshot 的属性data 是不可变的，这就是您收到错误的原因:

object is not extensible

但是你可以像那样替换整个对象:

@Injectable()
export class MyGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    // Use the spread operator to keep the previously resolved data
    next.data = {...next.data, guardedData: 'guarded'};
    return true;
  }
}

并在你的解析器中访问它

@Injectable()
export class FooResolver implements Resolve<any> {

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|Promise<any>|any {
    return route.data.guardedData;
  }

}