Как в Angular отловить событие, что компонент полностью загружен?

В Angular существует несколько способов отловить событие о полной загрузке компонента. В данном ответе рассмотрим два наиболее распространенных способа: использование lifecycle-хуков и реактивных расширений.

1. Использование lifecycle-хуков:
Angular предоставляет набор lifecycle-хуков, которые позволяют вам выполнять код в разных этапах жизненного цикла компонента. Один из наиболее подходящих для отлова полной загрузки компонента - это метод ngAfterViewInit(). Этот метод вызывается сразу после инициализации представления компонента, когда все его дочерние компоненты и директивы уже загружены и отображены на экране.

Вот пример:

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: '<p>My Component</p>'
})
export class MyComponent implements AfterViewInit {
  
  ngAfterViewInit() {
    // Ваш код, который должен выполниться после полной загрузки компонента
  }
}

2. Использование реактивных расширений:
Другой способ отловить событие о полной загрузке компонента - это использовать реактивные расширения. Например, вы можете создать BehaviorSubject и подписаться на его изменения внутри компонента. BehaviorSubject позволяет отправить инициализационное значение и будет передавать его всем подписчикам при каждом обновлении.

Вот пример:

import { Component, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-my-component',
  template: '<p>My Component</p>'
})
export class MyComponent implements OnInit {
  private isLoadedSubject = new BehaviorSubject<boolean>(false);
  isLoaded$ = this.isLoadedSubject.asObservable();

  ngOnInit() {
    // Передаем значение true, чтобы показать, что компонент полностью загружен
    this.isLoadedSubject.next(true);
  }
}

Затем вы можете подписаться на observable isLoaded$ в других частях вашего приложения, чтобы получать уведомления о полной загрузке компонента:

import { Component } from '@angular/core';
import { MyComponent } from './my-component';

@Component({
  selector: 'app-root',
  template: `
    <app-my-component></app-my-component>
    <ng-container *ngIf="myComponent.isLoaded$ | async">
      <p>My Component has been fully loaded!</p>
    </ng-container>
  `
})
export class AppComponent {
  constructor(private myComponent: MyComponent) {}
}

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