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

Question

我正在尝试编写一个看似简单的方法来获取我的 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天

Answer 1

可能有两个原因：

• 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

Answer 2

在那里发现了问题：

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用户而不是用户数据}，loadChildren：（）=>导入（'../profile/profile.module'）。然后( m => m.ProfilePageModule) }