Angular 解析 Rxjs 映射并订阅多个 API

Question

应用需要先获取jwt token，然后使用token，收集portal信息。此代码是用解析器编写的。

此代码产生错误异常：

Type 'Subscription' is not assignable to type 'Observable'

移除 Observable<any> 后，解析数据在组件中不可用，它会在解析完成之前启动组件

@Injectable()
export class PortalLoadingResolverService implements Resolve<any> {
    constructor(
      private authService:AuthService,
      private emiDataService:EmiDataService,
    ) { }

    resolve():Observable<any> {
      return this.authService.getJwtToken()
      .map(res => res.json())
      .subscribe(JwtToken => {
        debugger;
        localStorage.setItem('id_token',JwtToken.token);
        return this.emiDataService.getBasicLoadingDatas();
      });
    }
}

Answer 1

你的方法不是 returning Observable 这里，这就是 Typescript 大喊大叫。因为一旦你在 Observable 上应用了 subscribe 方法，它就会成为可观察的 return Subscription。通过将 Observable 与 switchMap 运算符链接起来，您可以轻松 return 一个 Observable。

resolve():Observable<any> {
  return this.authService.getJwtToken()
  .map(res => res.json())
  .switchMap(JwtToken => {
    localStorage.setItem('id_token',JwtToken.token);
    return this.emiDataService.getBasicLoadingDatas();
  });
}

Angular 解析 Rxjs 映射并订阅多个 API

Angular resolve Rxjs map and subscribe multiple APIs

rxjs

angular-routing

angular