Блог

Главная - Вопросы по программированию - Добавление экрана загрузки для компонента приложения ngoninit

Добавление экрана загрузки для компонента приложения ngoninit

#angular #ngoninit

#angular #ngoninit

Вопрос:

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

В нынешнем виде я всегда вижу false для showLoader в компоненте loader

app.component.ts

 ngOnInit(){
    this.loaderService.showLoader;
    //startupservice calls and auth calls
    this.loaderService.hideLoader;
  }

loader.service

 loaderSubject = new Subject<any>();


constructor(){

}

showLoader(){
    this.loaderSubject.next(true);
}

hideLoader(){
    this.loaderSubject.next(false);
}

loader.component

  showLoader = false; 

  constructor(private loaderService : LoaderService) { }

  ngOnInit(): void {
    this.loaderService.loaderSubject.subscribe((value) => this.showLoader = value);
  }

Комментарии:

1. На первый взгляд кажется странным, когда я смотрю на ваш код, showLoader должен иметь значение true, когда init и его состояние изменяются на false после того, как служба уже выполнила свою работу. Затем при первом посещении отобразится загрузчик и подождите немного, чтобы скрыть загрузчик.

2. В app.component.ts убедитесь, что вы вызываете функцию с помощью this.loaderService.showLoader() . В настоящее время это просто ссылка. Тема должна быть преобразована в observable перед подпиской. Несколько других вещей, но, надеюсь, это должно направить вас в правильном направлении

Ответ №1:

Это происходит потому, что Angular запускается ngOnInit() на родительском компоненте (компоненте приложения) сначала до создания дочернего компонента (компонента загрузчика). При создании компонента loader loaderSubject для него уже установлено значение false .

Ваш компонент loader отображается при ngAfterViewInit() вызове в компоненте приложения. Проверьте этот пример.

Метки: