在 ngoninit 中使用异步管道

Question

我的 angular 应用程序中有许多 api 调用，如果数据来自服务器，我想在其中显示加载组件。

为此，我有这样的加载程序服务：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class LoaderService {
  isLoading = new Subject<boolean>();

  show() {
    this.isLoading.next(true);
  }

  hide() {
    this.isLoading.next(false);
  }
}

我也有一个 httpInterceptor，我在其中使用 show 和 hide 方法，如下所示：

intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    this.loaderService.show();

    return new Observable((observer) => {
      next.handle(request).subscribe(
        (res) => {
          observer.next(res);
        },
        (err: HttpErrorResponse) => {
          this.loaderService.hide();
          if (err.error.message) {
            this.customNotificationService.showNotification(
              err.error.message,
              3000,
              'error'
            );
          } else {
            this.customNotificationService.showNotification(
              'Ismeretlen eredetű hiba. Lépj kapcsolatba a rendszer üzemeltetőjével.',
              3000,
              'error'
            );
          }
        },
        () => {
          this.loaderService.hide();
        }
      );
    });
  }

在我想使用加载组件的组件中，我在模板中有这个：

<loading-overlay
  [visible]="loadingOverlayVisible | async"
  loadingText=""
></loading-overlay>

并且在 ts:

loadingOverlayVisible: Subject<boolean> = this.loaderService.isLoading;

除一种情况外，此方法有效：ngOnInit。当组件加载时，我像这样加载初始数据：

ngOnInit() {
    this.gridData = { data: [], total: 0 };
    this.userService.getUsers().subscribe((users) => {
      users.forEach((user) => {
        // we get this as string from the backend
        user.lastLoginDateDisplay = new Date(user.lastLoginDateDisplay!);
      });
      this.gridData = { data: users, total: users.length };
    });
  }

数据已加载，但没有任何加载指示器。如果我改变逻辑并使用标准的 subscribe/unsubscribe 方式，它就可以工作。但是使用异步管道会更多 cleaner/smarter。

所以，问题是：如何做到这一点？

Answer 1

LoaderService.isLoading 应该是一个 BehaviorSubject。我不确定，但我认为 ngInit 在首次评估模板之前完成。如果我是对的，那么 LoaderService.isLoading 已经发出 true，当你的异步管道订阅时，为时已晚。

在 ngoninit 中使用异步管道

use of async pipe in ngoninit

rxjs

angular