Расскажите о хуках жизненного цикла Angular-компонента в порядке их выполнения.

Что такое жизненный цикл компонента?

Каждый Angular-компонент проходит через последовательность этапов: создание, рендеринг, проверка изменений и уничтожение. Хуки жизненного цикла — это методы, которые Angular вызывает автоматически в определённые моменты, давая разработчику возможность выполнить свою логику.

Порядок выполнения хуков

При создании компонента Angular вызывает хуки в следующем порядке:

1. ngOnChanges — вызывается первым, когда изменяются входные свойства (@Input). При первой инициализации он тоже срабатывает, если есть входные свойства.
2. ngOnInit — вызывается один раз после первого ngOnChanges. Здесь обычно инициализируют данные, делают запросы к серверу.
3. ngDoCheck — вызывается при каждой проверке изменений, даже если ничего не изменилось. Позволяет реализовать собственную логику обнаружения изменений.
4. ngAfterContentInit — после вставки внешнего контента (через ng-content).
5. ngAfterContentChecked — после каждой проверки вставленного контента.
6. ngAfterViewInit — после инициализации представления компонента и его дочерних компонентов.
7. ngAfterViewChecked — после каждой проверки представления.
8. ngOnDestroy — перед уничтожением компонента. Здесь отписываются от подписок и освобождают ресурсы.

Пример кода

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

@Component({ selector: 'app-demo', template: '<p>Demo</p>' })
export class DemoComponent implements OnInit, OnChanges, OnDestroy {
  @Input() value: string;

  ngOnChanges() { console.log('1. ngOnChanges'); }
  ngOnInit() { console.log('2. ngOnInit'); }
  ngDoCheck() { console.log('3. ngDoCheck'); }
  ngAfterContentInit() { console.log('4. ngAfterContentInit'); }
  ngAfterContentChecked() { console.log('5. ngAfterContentChecked'); }
  ngAfterViewInit() { console.log('6. ngAfterViewInit'); }
  ngAfterViewChecked() { console.log('7. ngAfterViewChecked'); }
  ngOnDestroy() { console.log('8. ngOnDestroy'); }
}

В консоли при создании компонента вы увидите последовательность от 1 до 7, а при удалении — 8.

Где это применяется?

Хуки используются повсеместно: ngOnInit для загрузки данных, ngOnDestroy для отписки от RxJS-подписок, ngOnChanges для реакции на изменение входных параметров. Понимание порядка помогает избежать ошибок, например, когда пытаются обратиться к DOM в ngOnInit, хотя он ещё не готов — для этого существует ngAfterViewInit.

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