Resolve 函数在调用组件 ngOnInit 函数之前不解析组件数据答案

【问题标题】：Resolve function does not resolve component data before the component ngOnInit function is invokedResolve 函数在调用组件 ngOnInit 函数之前不解析组件数据
【发布时间】：2018-05-05 13:03:51
【问题描述】：

我有一个类似这样的 URL：

base_path/some_path?elementId=33203

基本上，用户可以并且通常通过在浏览器中粘贴上述链接来导航到此路径。我需要在组件之前加载该组件的数据，因此我开始阅读 Angular 路由教程，特别是旨在实现我所拥有的确切难题的解析器服务。所以我创建了一个解析器服务，例如：

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<SomeObject> {
    let loanId = route.queryParams['elementId'];

    if (isNil(loanId)) {
      return null;
    }
    return this.service.getElementById(elementId)
      .subscribe(response => {
    //response is JSON
          return Observable.of(response);
        }
        else {
          return null;
        }
      });
  }

这个解析类现在添加到 app.routing.module.ts 中，例如：

{ path: 'base_path/some_path', component: SomeComponent,
resolve : {
  someObject: SomeObjectResolver
}

}

并在我的component.ts文件中进行相应的修改，如：

ngOnInit() {
     this.route.data.subscribe((data: { someObject: SomeObject}) => {

     });

}

我在解析器和组件文件中设置了调试断点。当我访问 URI：base_path/some_path?elementId=33203 时，它首先访问了解析器，但是由于解析器调用了服务（这反过来又调用了对服务器获取数据的 ajax 调用），它然后简单地继续到组件，并调用 ngOnInit函数，尝试调用 (data: { someObject: SomeObject}) 上的订阅函数

但是，someObject 尚不可用，因此它会引发错误并重定向。

我错过了什么？ resolve 函数不应该在调用它之前显式加载它的组件的数据吗？

【问题讨论】：

您需要真正返回可观察对象才能使其工作； resolve 目前不返回Observable<SomeObject>，我很惊讶编译器没有告诉你。
为什么不直接返回 observable 而不是订阅它然后返回一个新的 observable？
@jonrsharpe：这不是返回 Observable 吗？返回 Observable.of(response);
它正在返回它从那个回调。但这不是resolve的返回值。
纠正一下，返回值是服务回调

标签： angular resolve resolver angular4-router

【解决方案1】：

你必须返回一个 Observable，你不需要订阅它然后返回一个新的 observable

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<SomeObject> {
  let loanId = route.queryParams['elementId'];

  if (isNil(loanId)) {
    return Observable.of(null);
  }
  return this.service.getElementById(elementId);
}

【讨论】：

是的，其实 this.service 确实有回报，我错过了
能否在您的代码中提供服务功能？
它基本上返回一个 Observable