Какие хуки жизненного цикла компонента в Angular?

Question

Accepted Answer

**Хуки жизненного цикла** — это методы, которые Angular вызывает в определённые моменты жизни компонента — создание, изменение входных данных, отрендеринг и уничтожение. Вы реализуете их, добавляя методы интерфейса в класс вашего компонента.

## Основные хуки по порядку

```ts
import { Component, OnInit, OnDestroy, OnChanges, SimpleChanges } from "@angular/core";

@Component({ ... })
export class MyComponent implements OnInit, OnDestroy, OnChanges {
  ngOnChanges(changes: SimpleChanges) {
    // called when an @Input value changes (before ngOnInit the first time)
  }
  ngOnInit() {
    // called ONCE after the first ngOnChanges — do initialization, fetch data
  }
  ngOnDestroy() {
    // called just before the component is removed — CLEAN UP here
  }
}
```

## Полная последовательность

```text
constructor          → DI happens; inputs NOT yet available
ngOnChanges          → when @Input values are set/changed
ngOnInit             → once, after first ngOnChanges ★ (init, fetch data)
ngDoCheck            → every change detection run (custom change detection)
ngAfterContentInit   → projected content (<ng-content>) initialized
ngAfterViewInit      → the component's view + child views ready ★ (access @ViewChild)
ngAfterViewChecked   → after each view check
ngOnDestroy          → before removal ★ (unsubscribe, clear timers)
```

## Три хука, которые вы используете чаще всего

```ts
ngOnInit() {
  this.userService.getUsers().subscribe(u => this.users = u); // init/fetch — inputs are ready
}
ngAfterViewInit() {
  this.chart.nativeElement.focus(); // the DOM/@ViewChild exists now
}
ngOnDestroy() {
  this.subscription.unsubscribe();   // prevent memory leaks!
  clearInterval(this.timer);
}
```

- **`ngOnInit`** — стандартное место для инициализации и загрузки данных (в отличие от конструктора, `@Input`s доступны здесь).
- **`ngAfterViewInit`** — когда существуют дочерние представления и ссылки `@ViewChild`.
- **`ngOnDestroy`** — очистка: отпишитесь от Observable, очистите таймеры, удалите слушатели.

## Почему ngOnInit вместо конструктора

Конструктор должен выполнять только DI; входные данные ещё не привязаны там. `ngOnInit` запускается после того, как Angular настроит компонент и его входные данные — правильное место для логики инициализации.

## Почему это важно

Хуки жизненного цикла позволяют запустить логику в нужный момент — инициализируйте в `ngOnInit`, обращайтесь к отрендеренному представлению в `ngAfterViewInit` и, что критично, **очищайте в `ngOnDestroy`** (отписка от Observable — это способ #1 избежать утечек памяти в Angular).

Знание порядка и роли каждого хука необходимо для правильной загрузки данных, доступа к DOM и управления ресурсами.