为什么主页组件中的配置文件详细信息为空

Question

如果详细信息为空，我将尝试调用配置文件 api，以避免每次用户回到家时每次路由更改时都调用 api在页面显示之前。

home 组件中的 console.log 为 null，而 auth 服务中的 console.log 打印正确的配置文件数据。

export class HomeComponent {
    activeRoute.data.subscribe((data: any)=> {
      this.userDetail = data.profileDetails;
      console.log(data);
    });
}

应用路由

path: '', component: HomeComponent, resolve: { profileDetails: ProfileDetailsResolverService }

认证服务

 getUserProfile() {
  if(!this.detail) {
    this.http.get(this.userProfileApi).subscribe((res: any)=>{
      console.log(res);
      this.detail = res.data;
      return this.detail;
      } else {
      return this.detail;
      }
   });
  }

配置文件解析器服务

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
      if(localStorage.getItem('access_token')){
      return this.auth.getUserProfile();
    }
  }

Answer 1

getUserProfile 不应订阅。角度路由解析器处理这个问题。 shareReplay(1) 确保它执行一次 http 调用。您没有在组件中获取值的原因是因为 getUserProfile 没有返回任何内容：

授权服务：

userProfile$ = this.http.get(this.userProfileApi).pipe(
  map((res) => res.data),
  shareReplay(1)
);


getUserProfile() {
  return this.userProfile$;
}

并将您的解析器更改为：

resolve() {
  if(localStorage.getItem('access_token')){
    return this.auth.getUserProfile();
  }
}