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

Question

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

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

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 наблюдаемых разрешены в угловых

Answer 1

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

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

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

Answer 2

Вы можете сделать это, используя перехватчик. Посмотрите этот стекаблитц здесь: https://stackblitz.com/github/melcor76/interceptors?file=src%2Fapp%2Finterceptors%2Floader.interceptor.ts

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