Как показать индикатор загрузки, пока все асинхронные http-вызовы не будут завершены - Angular

Question

Мой вопрос заключается в том, как показать загрузчик, пока все мои асинхронные http-запросы не будут выполнены.Таким образом, я не буду показывать кусочки экрана, пока все данные не будут получены с сервера.

Моя самая большая проблема в том, что у меня есть компоненты, которые запускаются специально через html, поэтому я не могу просто поместить оператор *ngIf в часть html, когда я хочу его показать.

Вот что у меня так далеко.К сведению, переменная Template, которая в настоящее время запускает видимость html, устанавливается, когда один из http-запросов завершается в этом компоненте.Я хочу дождаться завершения http-запросов дочернего компонента, прежде чем показывать html, но я должен выполнить логику в html для вызова дочерних компонентов.

Оператор *ngIf делает NOT в настоящее время работает так, как я хочу, я просто показываю, что я сейчас делаю.

<div class="col-sm-12"
            *ngIf="Template">
    <div id="nav" style="height: 200px">
        <div id="outer"
             style="width: 100%">
            <div id="inner">
                <o-grid>
                </o-grid>
            </div>
        </div>
    </div>
    <collapsible-panel *ngFor="let s of Template?.s; let i = index"
                       [title]="s.header">
        <div *ngFor="let c of s.c">
            <fact [eC]="c.c"
                    [label]="c.l">
            </fact>
        </div>
    </collapsible-panel>

    <collapsible-panel title="T">
        <div>
            <i-f >
            </i-f>
        </div>
    </collapsible-panel>
</div>
<div *ngIf="!Template" class="spinner"></div>

---

РЕДАКТИРОВАТЬ (РЕШЕНИЕ) : Вот решение, которое яреализовано, согласно ответу ниже от @ danday74.

Я создал переменную внутри своего сервиса, где я делаю все свои http-запросы.Я определил его как true для запуска и установил его в false в одном из дочерних компонентов после завершения подписки.

Мне просто нужно в будущем установить cService.asyncRequestsInProgress в значение false, где бы ни происходил последний асинхронный http-запрос, если он когда-либо изменится.

Родительский HTML:

<div class="col-sm-12"
             [ngClass]="{hideMe:cService.asyncRequestsInProgress}">
    ......
</div>
<div *ngIf="cService.asyncRequestsInProgress" class="spinner"></div>

Служба:

@Injectable()
export class CService {

    asyncRequestsInProgress: boolean = true;
    constructor(public http: HttpClient) { }
}

Дочерний компонент (где завершается последний асинхронный запрос):

export class FComponent implements OnInit {
    ....
    doSomething() {
        this.cService.getWhatever().subscribe(x => {
            this.cService.asyncRequestsInProgress = false;
        }
    }
}

styles.css

.hideMe {
  visibility: hidden;
}

Answer 1

Вы можете использовать распознаватели для загрузки, затем в app.component.ts установите для вашей переменной значение true или false в зависимости от события:

navigationInterceptor(event: RouterEvent): void {
  if (event instanceof NavigationStart) {
    //true
  }
  if (event instanceof NavigationEnd) {
    //false
  }

  // Set loading state to false in both of the below events to hide the spinner in case a request fails
  if (event instanceof NavigationCancel) {
    //false
  }
  if (event instanceof NavigationError) {
    //false
  }
}

Answer 2

Вы можете использовать распознаватель.Средство распознавания обеспечивает загрузку данных перед загрузкой компонента.

В качестве альтернативы, если вы не хотите использовать * ng, если вы можете просто использовать [ngClass]="{hideMe: allAsyncRequestsComplete}" для стилизации бита, который вы не хотите показывать, пока загрузка не завершится.полный.CSS может быть:

.hideMe {
  visibility: hidden;
}

и установить allAsyncRequestsComplete в значение true, когда загрузка будет завершена.