Как показать (изначально) экран загрузки и скрыть, когда (например, 3) get-запросы разрешаются в Angular 2 / 7 Typescript

#angular #typescript #promise #observable #angular7

#angular #typescript #обещание #наблюдаемый #angular7

Вопрос:

Я новичок в Angular 7, я пытаюсь показать экран загрузки при загрузке компонента приложения (root), а затем у меня есть 2 компонента Get1 и Get2, которые вызывают 2 запроса Get http соответственно. Как скрыть панель загрузки, когда оба Get-запроса завершены. В терминах AngularJS у нас было обещание.all знать, когда все запросы были выполнены следующим образом http://jsfiddle.net/danielzen/t7g7djzk / Как или что делать в Angular с использованием наблюдаемых

Я могу это сделать

 this.navbarService.getFiscalDateList(this.resultsFilterRootObject)
  .subscribe((data: FiscalWeekListRootObject) => {

      this.fiscalWeekListRootObject = {...data};

      this.currentWeek = this.fiscalWeekListRootObject.data.vehicleFiscalDate.vehicleFiscalWeek;
      //hide loading screen since there is only one GET what to do for multiple GET requests 

    }


  );
  

Ожидается: скрыть экран загрузки, когда 2 наблюдаемых разрешены в Angular

Ответ №1:

У меня была точно такая же проблема раньше, лучший способ решить это, на мой взгляд, с помощью перехватчика.

Вот отличная статья, объясняющая, как заставить это работать должным образом, и она отлично работает с 1 или более HTTP-вызовами. Он включает код, который вы можете скопировать и вставить, чтобы вы могли быстро запустить свое приложение.

https://nezhar.com/blog/create-a-loading-screen-for-angular-apps/

Ответ №2:

Вы можете сделать это, внедрив перехватчик. Смотрите Этот stackblitz здесь: https://stackblitz.com/github/melcor76/interceptors?file=src/app/interceptors/loader.interceptor.ts

Это из этой статьи — https://blog.angularindepth.com/top-10-ways-to-use-interceptors-in-angular-db450f8a62d6