Angular2将数据从CanActivate保护传递到Resolve解析器？答案

【问题标题】：Angular2 pass data from CanActivate guard to Resolve resolver?Angular2将数据从CanActivate保护传递到Resolve解析器？
【发布时间】：2017-05-18 16:48:46
【问题描述】：

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

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

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

我试图摆脱一些简单的事情

route.data['myData'] = value;

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

我也尝试过类似的方法：

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

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

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

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

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

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

对象不可扩展

但是你可以像这样替换整个对象：

@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;
  }

}

【讨论】：