Методи життєвого циклу компонентів в Angular

Компоненти в Angular проходять через серію стадій життєвого циклу — від створення до знищення. Angular надає спеціальні методи (хуки), які дозволяють "підключатися" до цих стадій та виконувати необхідну логіку.

Основні Хуки Життєвого Циклу

Метод (хук)	Коли викликається
`ngOnChanges()`	Коли змінюються вхідні `@Input()` пропси
`ngOnInit()`	Один раз після ініціалізації компонент
`ngDoCheck()`	На кожному циклі виявлення змін (кастомне виявлення змін)
`ngAfterContentInit()`	Після вставки контенту в `<ng-content>`
`ngAfterContentChecked()`	Після перевірки кожного вставленого контенту
`ngAfterViewInit()`	Після ініціалізації виду (ViewChild)
`ngAfterViewChecked()`	Після перевірки кожного виду компонент
`ngOnDestroy()`	Перед видаленням компонент з DOM

Порядок Виклику Хуків

text

ngOnChanges (якщо присутній @Input)
→ ngOnInit
→ ngDoCheck
→ ngAfterContentInit
→ ngAfterContentChecked
→ ngAfterViewInit
→ ngAfterViewChecked
(потім — ngDoCheck → ngAfterContentChecked → ngAfterViewChecked — циклічно)
→ ngOnDestroy (коли компонент видалено)

Приклад Використання Хуків Життєвого Циклу

typescript

import {
  Component,
  OnInit,
  OnChanges,
  OnDestroy,
  Input
} from '@angular/core';

@Component({
  selector: 'app-example',
  template: `<p>Приклад життєвого циклу</p>`
})
export class ExampleComponent implements OnInit, OnChanges, OnDestroy {
  @Input() data: string = '';

  constructor() {
    console.log('конструктор');
  }

  ngOnChanges() {
    console.log('ngOnChanges: дані змінено');
  }

  ngOnInit() {
    console.log('ngOnInit: компонент ініціалізовано');
  }

  ngOnDestroy() {
    console.log('ngOnDestroy: компонент видалено');
  }
}

Коли Використовувати?

Хук	Для чого використовувати
`ngOnInit`	Ініціалізація даних, підписки, початкові дії
`ngOnChanges`	Реакція на зміни вхідних властивостей (`@Input`)
`ngOnDestroy`	Очищення таймерів, відписка від потоків, WebSocket тощо
`ngAfterViewInit`	Робота з ViewChild (DOM) після рендеринг
`ngDoCheck`	Кастомна логіка при оновленнях (використовується рідко)

Порада:

Найбільш часто використовуються ngOnInit, ngOnDestroy та ngOnChanges. Інші потрібні для більш тонкого налаштування та специфічних випадків.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Методи життєвого циклу компонентів в Angular

#Основні Хуки Життєвого Циклу

#Порядок Виклику Хуків

#Приклад Використання Хуків Життєвого Циклу

#Коли Використовувати?

Коротка відповідь

Основні Хуки Життєвого Циклу

Порядок Виклику Хуків

Приклад Використання Хуків Життєвого Циклу

Коли Використовувати?