Угловой 7 - Обнаружение, когда компонент в области просмотра

Question

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

Есть ли способ проверить или событие сообщить, когда компонент загружен и отображается в окне просмотра?

В качестве теста я попробовал хук жизненного цикла:

ngAfterViewInit(): void {
    alert('Component Loading complete');
  }

Но, к сожалению, это предупреждение отображается до того, как компоненты фактически окажутся в порту просмотра.

Цените любые рекомендации и облегченные решения. Спасибо

Answer 1

Есть ли способ проверить или сообщить, когда компонент загружен и отображается в окне просмотра?

Все компоненты вида созданы при ngAfterViewInit() срабатывает.

Вы можете прослушать изменения в ViewChildren , используя запросы.

https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e?gi=e81ee3df6cab

Этот запрос сообщит вам только, когда DOM-элемент существует , и это не может быть context для удаления колеса загрузки.Альтернативой является уведомление компонента parent через компонент child .Например;после загрузки данных из HTTP.

@Component({
    ...
    template: `
        <div class="loading" *ngIf="!(loaded$ | async)"></div>
        <child-component></child-component>
    `
})
export class Parent Component {
     public loaded$: BehaviorSubject<boolean> = new BehaviorSubject(false);
}

@Component({...})
export class ChildComponent implements OnInit {
     public constructor(private _httpClient: HttpClient,
                        private _parent: ParentComponent) {}

     public ngOnInit() {
         this._httpClient.get('stuff').subscribe(() => {
             this._parent.loaded$.next(true);
         });
     }
}

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