Kaj so Angular-ovi kljuki životnega cikla komponente?

Question

Accepted Answer

**Kljuki životnega cikla** so metode, ki jih Angular poziva v določenih trenutkih življenja komponente — ustvarjanje, spremembe vhodnih podatkov, upodabljanje in uničevanje. Implementirate jih z dodajanjem metod vmesnika v razred komponente.

## Glavni kljuki v vrsti

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

## Полна zaporedje

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

## Trije kljuki, ki jih najpogosteje uporabljate

```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`** — standardno mesto za inicializacijo in pridobivanje podatkov (za razliko od konstruktorja so tu `@Input`i na voljo).
- **`ngAfterViewInit`** — ko obstajajo otroške predstave in reference `@ViewChild`.
- **`ngOnDestroy`** — čiščenje: odjavite se od Observable, počistite časovnike, odstranite poslušalce.

## Zakaj ngOnInit namesto konstruktorja

Konstruktor bi moral samo izvesti DI; vhodi še niso vezani. `ngOnInit` se izvedi potem, ko je Angular nastavil komponento in njene vhode — pravo mesto za logiko zagona.

## Zakaj je to pomembno

Kljuki životnega cikla vam omogočajo, da logiko zaženete v pravem času — inicializacijo v `ngOnInit`, dostop do upodobljene predstave v `ngAfterViewInit` in ključno **čiščenje v `ngOnDestroy`** (odjavlja se od Observable je #1 način za izogibanje puščanjem pomnilnika v Angular-ju).

Poznavanja vrstnega reda in vloge vsakega kljuka je bistveno za pravilno pridobivanje podatkov, dostop do DOM-a in upravljanje virov.