Question

我有一个类似这样的网址：

base_path/some_path?elementId=33203

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

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函数中，尝试调用subscribe函数（data：{someObject：SomeObject}）

但是，someObject尚不可用，因此会抛出错误并重定向。

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

Answer 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);
}

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

1 个答案: