Как создать компонент загрузки в Angular 11

#angular #loading #angular11

Вопрос:

Мне нужно создать загрузочный компонент с помощью Angular 11. Например, при загрузке данных я хочу, чтобы мой загрузочный компонент отображался, иначе должны работать другие компоненты.

У меня нет подходящей идеи, как это сделать?

Кто-нибудь может мне помочь?

Ответ №1:

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

компонент приложения: html:

 <div *ngIf="loadingService.isLoading$ | async">Loading...</div>
 

тс:

 constructor(public loadingService: LoadingService) {

}
 

служба погрузки:

 class LoadingService {
  private isLoading = new Subject<boolean>();
  isLoading$ = this.isLoading as Observable;

  toggleLoading(val: boolean) {
    this.isLoading.next(val);
  }
}
 

чтобы начать загрузку с любого компонента, введите службу и вызовите метод переключения загрузки:

 constructor(private loadingService: LoadingService) {
  this.loadingService.toggleLoading(true);
}
 

в этом коде могут быть некоторые синтаксические ошибки или опечатки, так как я его не тестировал, просто поделился идеей
дайте мне знать, если у вас возникнут какие-либо другие проблемы