Jakie są Angular'owe haki cyklu życia komponentu?

Question

IT Interview Practice · Accepted Answer

**Haki cyklu życia** to metody, które Angular wywołuje w określonych momentach życia komponentu — tworzenie, zmiany danych wejściowych, renderowanie i niszczenie. Implementujesz je, dodając metody interfejsu do klasy komponenty.

## Główne haki w kolejności

```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
  }
}
```

## Pełna sekwencja

```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)
```

## Trzy, które używasz najczęściej

```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`** — standardowe miejsce do inicjalizacji i pobierania danych (w odróżnieniu od konstruktora, `@Input`s są tutaj dostępne).
- **`ngAfterViewInit`** — gdy istnieją widoki podrzędne i odnośniki `@ViewChild`.
- **`ngOnDestroy`** — czyszczenie: anuluj subskrypcje Observable'i, wyczyść czasomierze, usuń detektory zdarzeń.

## Dlaczego ngOnInit zamiast konstruktora

Konstruktor powinien wykonywać tylko DI; dane wejściowe nie są tam jeszcze powiązane. `ngOnInit` uruchamia się po skonfigurowaniu komponenty i jej danych wejściowych przez Angular — właściwe miejsce dla logiki uruchomieniowej.

## Dlaczego to ważne

Haki cyklu życia pozwalają uruchomić logikę we właściwym momencie — inicjalizuj w `ngOnInit`, uzyskaj dostęp do renderowanego widoku w `ngAfterViewInit` i kluczowo **oczyść w `ngOnDestroy`** (anulowanie subskrypcji Observable'i to #1 sposób na uniknięcie wycieków pamięci w Angular'ze).

Znajomość kolejności i roli każdego haka jest niezbędna dla prawidłowego pobierania danych, dostępu do DOM i zarządzania zasobami.

Główne haki w kolejności

Pełna sekwencja

Trzy, które używasz najczęściej

Dlaczego ngOnInit zamiast konstruktora

Dlaczego to ważne

Powiązane pytania