如何在路由解析器Angular中返回内部可观察的结果答案

【问题标题】：How to return result of inner observable in route resolver Angular如何在路由解析器Angular中返回内部可观察的结果
【发布时间】：2020-10-31 14:33:13
【问题描述】：

我正在尝试编写一个看似简单的方法来获取我的 Angular 应用程序的用户个人资料详细信息，并在使用解析器导航到个人资料页面之前加载该数据。 .即使没有错误，解析器也没有完成这是我的解析器类代码：

export class ProfileResolverService implements Resolve<Observable<any>> {

  constructor(private fs: FirestoreService, private auth:AuthService) { }

   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    return this.auth.user.pipe(take(1),
      mergeMap(userdata => {
        return this.fs.getUserProfile(userdata.uid) //get user profile returns  Observable<unknown[]>
      })
    )
    
  }
   
}

在我的路由模块中：

path: 'profile',
            children: [
                {
                    path: '',
                    resolve: {
                      userdata: ProfileResolverService
                    },
                    loadChildren: () => import('../profile/profile.module').then( m => m.ProfilePageModule)
                }

谁能帮忙。坚持了2天

【问题讨论】：

你试过用 switchMap 代替 mergeMap 吗？
你的 AuthService 是什么？是 Firebase 身份验证服务还是您自己的？如果是这样，你能发布 this.auth.user 的样子吗？

标签： angular typescript angularfire rxjs-observables mergemap

【解决方案1】：

在那里发现问题：

export class ProfileResolverService implements Resolve<Observable<any>> {

  constructor(private fs: FirestoreService, private auth:AuthService) { }

   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    return this.auth.user.pipe(take(1),
      mergeMap(userdata => {
        return this.fs.getUserProfile(userdata.uid).pipe(take(1),map(user => user)); //had to map the output of the observable and then fetch it in my rout resolver
      })
    )
    
  }
   
}```

So my resolver now looks like this:

路径：'配置文件'，孩子们： [ { 小路： ''，解决： { 用户： ProfileResolverService \get 用户而不是 userdata }, loadChildren: () => import('../profile/profile.module').then( m => m.ProfilePageModule) }

【讨论】：

【解决方案2】：

可能有两个原因：

this.auth.user 不发出任何值
this.fs.getUserProfile(userdata.uid) 未完成

试试这个看看你有没有日志：

    return this.auth.user.pipe(
      take(1),
      mergeMap(userdata => {
        console.log('userdata: ', userdata);
        return this.fs.getUserProfile(userdata.uid).pipe(
          tap(profile => console.log('profile: ', profile));
          finalize(() => console.log('getUserProfile complete or error'));
        )
      })
    )

如果你的代码没问题，你至少应该有日志 userdata 和 getUserProfile

【讨论】：

您的解决方案有帮助！必须映射内部 observable 来修复它