在调用组件 ngOnInit 函数之前，解析函数不会解析组件数据

Question

我有一个 URL 是这样的：

base_path/some_path?elementId=33203

基本上，用户可以并且通常通过在浏览器中粘贴上面的 link 来导航到此路径。我 需要在组件 之前加载该组件的数据，所以我开始阅读 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;
        }
      });
  }

此解析 class 现在添加到 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 尚不可用，因此它抛出错误并重定向。

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

Answer 1

你必须return一个Observable，你不需要订阅它然后return一个新的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);
}

在调用组件 ngOnInit 函数之前，解析函数不会解析组件数据

Resolve function does not resolve component data before the component ngOnInit function is invoked

angular

resolve

resolver

angular4-router