如何在服务仍在运行时加载前面的每个页面？

Question

对于用户输入的每个页面，我想在 API 调用仍在进行时首先渲染页面，并且如果成功，服务必须仅运行一次。

我尝试使用

resolver

方法，但

resolver

本身正在等待 API 调用完成，然后渲染页面。

我尝试过的：

    import { Injectable } from "@angular/core";
    import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from "@angular/router";
    import { Observable, of } from "rxjs";
    import { delay } from "rxjs/operators";

    @Injectable({ providedIn: 'root' })
    export class HashCriptoResolver implements Resolve<any> {
      constructor(
          private googleAnalyticsService: GoogleAnalyticsService
      ) { }

      resolve(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
      ): Observable<any> {
        const hashService$ = of({
          hash: '@$#@ERWWESDCFDSEWR@#@#'
        });
        return hashService$
          .pipe(
            delay(10000),
            tap(response => this.googleAnalyticsService.sendHash(response.hash))
          )
      }
    }


  {
    path: '',
    resolve: {
      hashId: HashCriptoResolver
    },
  }

问题是

resolver

等待10秒然后渲染页面。 还有其他方法吗？

Answer 1

该接口定义了一个resolve()方法，该方法在 ResolveStart 路由器事件。路由器等待数据发送 在路线最终激活之前解决。

就您而言，我认为解析器方法不是一个好的选择，因为解析器会阻塞路由，直到数据得到解析。您的请求可能需要很长时间才能解决。

另一种方法是使用可观察量来获取组件本身的数据，并且在获取数据时可以使用加载指示器。这可以改善用户体验。