Question

无效类型的个人资料详细信息解析器服务

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): void {
      if(localStorage.getItem('access_token')){
      this.auth.getUserProfile().subscribe((res)=>{
          this.profileDetailService.sendDetails(res);
        });

个人资料详细信息服务

export class ProfileDetailService {
  constructor() { }

  private subject = new Subject<any>();

  sendDetails(currentDetails: any) {
   this.subject.next(currentDetails);
   console.log(currentDetails)
 }

 getDetails(): Observable<any> {
  return this.subject.asObservable();
}

我的仪表板组件

export class DashboardComponent implements OnInit, OnDestroy {
ngOnInit() {

    this.profileDetailService.getDetails().subscribe((res)=>{
      this.userDetail = res.data;
      this.avatarUrl = this.data.siteLink()+this.userDetail.avatar;
      console.log(this.userDetail);
    });
  }
}

上面的代码可以将用户详细信息从仪表板组件和概要文件详细信息服务组件打印在控制台中，但是加载器在http请求之前停止，这意味着当获取概要文件详细信息的http请求正在显示时，加载器不会显示被制造。

在下面的代码中，配置文件详细信息从配置文件详细信息解析器服务，配置文件详细信息服务打印在控制台中，但从未调用调用getDetail方法的仪表板组件中的代码。在这种情况下，加载程序会在发出http请求以获取个人资料详细信息时显示。

个人资料详细信息解析器

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
      if(localStorage.getItem('access_token')){
      return this.auth.getUserProfile().pipe(

        map((res: any) => {
          this.profileDetailService.sendDetails(res);
          console.log(res);
        })

      );
    }

个人资料详细信息服务与情况1相同。

仪表板组件代码也与情况1相同。

下面是应用程序组件代码，它确定了负载，现在它可以应用于其他所有http调用中的任何组件，无论它们可能是什么组件，但在情况1都不行。

this.router.events.subscribe((routerEvent: Event)=>{
      if(routerEvent instanceof NavigationStart) {
        this.loadingService.setLoading(true);
        this.loadingService.loading$.subscribe((res: boolean)=>{
          this.loading = res;
        })
      }
      if(routerEvent instanceof NavigationEnd || 
         routerEvent instanceof NavigationCancel || 
         routerEvent instanceof NavigationError){
          this.loadingService.setLoading(false);
          this.loadingService.loading$.subscribe((res: boolean)=>{
            this.loading = res;
          })
      }
    });

Answer 1

返回类型为void的解析器将立即解析，并且不会延迟导航。解析程序的要点是，它会根据需要延迟导航，直到可观察到的内容完成为止，并且它将为您处理订阅，因此您不应该订阅解析程序。如果需要，您仍然可以使用tap运算符产生副作用：

    return this.auth.getUserProfile().pipe(tap(res=>{
      this.profileDetailService.sendDetails(res);
    }));

然后，您将能够像下面这样访问路线数据中的已解析数据：

constructor(private route: ActivatedRoute) {
  this.route.data.subscribe(data => console.log(data));
}

如果路由解析器服务的类型为void，则不会在http请求上加载

1 个答案: