Életciklus hookok az Angularban: mikor melyiket használd?

Az Angular egy hatékony keretrendszer, amely lehetővé teszi komplex, interaktív webalkalmazások építését. A keretrendszer alapkövei a komponensek, amelyek a felhasználói felület építőkövei. Egy komponens azonban nem csak megjelenik és eltűnik; van egy „élete”, amely a létrehozásától a megsemmisítéséig tart. Ezen életút során különböző események történnek, amelyekre az Angular speciális metódusokkal, úgynevezett életciklus hookokkal kínál lehetőséget. Ezek a hookok lehetővé teszik számunkra, hogy beavatkozzunk a komponens életének kulcsfontosságú pontjaiba, és specifikus logikát futtassunk le, amikor például egy komponens inicializálódik, adatai megváltoznak, vagy éppen eltávolításra kerül a DOM-ból.

De hogyan igazodjunk el a sokféle hook között, és mikor melyiket érdemes használni? Ez a cikk segít eligazodni az Angular életciklus hookok világában, bemutatva mindegyiket részletesen, gyakorlati példákkal illusztrálva, hogy a fejlesztés során mindig a legmegfelelőbb eszközt választhasd. Célunk, hogy mélyebb megértést nyújtsunk, és segítsünk a leggyakoribb problémák elkerülésében.

Miért fontosak az életciklus hookok?

Képzeld el, hogy építesz egy házat. Vannak fázisok: alapozás, falazás, tetőfedés, berendezés, és végül lebontás (remélhetőleg erre ritkábban kerül sor). Minden fázisban más-más feladatokat kell elvégezni. Hasonlóan, az Angular komponenseknek is vannak fázisaik. Az életciklus hookok biztosítják, hogy a megfelelő kódrészlet a megfelelő időben fusson le. Segítenek elkerülni a hibákat, optimalizálni a teljesítményt, és rendezetté tenni a kódbázist. Például, adatokat csak akkor érdemes lekérni a szerverről, amikor a komponens már készen áll az adatok megjelenítésére, vagy feliratkozásokat csak akkor kell törölni, amikor a komponens már nincs a DOM-ban, elkerülve ezzel a memóriaszivárgást. Az Angular kilenc fő életciklus hookot biztosít, mindegyiket egy interfész definiálja, amit a komponens (vagy direktíva) implementálhat.

Az Angular életciklus hookok áttekintése és sorrendje

Mielőtt belemerülnénk az egyes hookok részleteibe, nézzük meg, milyen sorrendben hívódnak meg tipikus esetben, egy szülő-gyermek komponens struktúrában:

`ngOnChanges` (első hívás, majd minden input változásnál)
`ngOnInit` (csak egyszer, inicializáláskor)
`ngDoCheck` (minden változásészlelési ciklusban)
`ngAfterContentInit` (csak egyszer)
`ngAfterContentChecked` (minden változásészlelési ciklusban)
`ngAfterViewInit` (csak egyszer)
`ngAfterViewChecked` (minden változásészlelési ciklusban)
`ngOnDestroy` (csak egyszer, megsemmisítéskor)

Fontos megjegyezni, hogy az `ngOnChanges`, `ngDoCheck`, `ngAfterContentChecked` és `ngAfterViewChecked` hookok többször is meghívásra kerülhetnek a komponens élete során, míg a többi általában csak egyszer.

1. `ngOnChanges` – Az input adatok őre

A ngOnChanges hook az első, ami meghívásra kerül, és utána minden alkalommal, amikor a komponens input tulajdonságainak értéke megváltozik. Ez a hook egy SimpleChanges típusú objektumot kap paraméterként, amely tartalmazza az összes megváltozott input tulajdonság korábbi és aktuális értékét.

Mikor használd?

Amikor a komponensnek reagálnia kell az input adatok változására, még azelőtt, hogy az ngOnInit lefutna.
Ha komplex logikát kell futtatnod az input adatok alapján, például újraszámolásokat, adatok előfeldolgozását, vagy egy UI elem frissítését, ami közvetlenül az inputtól függ.
Például egy táblázat komponensben, ha az items input megváltozik, újra kell rendezni vagy szűrni az adatokat.

Példa:

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

@Component({
  selector: 'app-child',
  template: `
    <p>Üdvözlet: {{ greeting }}</p>
    <p>Számláló: {{ counter }}</p>
  `
})
export class ChildComponent implements OnChanges {
  @Input() greeting: string = '';
  @Input() counter: number = 0;

  ngOnChanges(changes: SimpleChanges): void {
    console.log('ngOnChanges triggered', changes);
    if (changes['greeting']) {
      console.log(`Greeting changed from ${changes['greeting'].previousValue} to ${changes['greeting'].currentValue}`);
    }
    if (changes['counter'] && changes['counter'].currentValue > 5) {
      console.log('Counter is now greater than 5!');
      // Itt végezhetnénk valamilyen további logikát
    }
  }
}

Mikor ne használd?

Komponens egyszeri inicializálására. Erre az ngOnInit alkalmasabb.
Ha az input egy objektum, és csak annak belső tulajdonsága változik, az ngOnChanges nem fogja detektálni. Az ngOnChanges csak a referenciacseréket figyeli.

2. `ngOnInit` – A komponens indítómotorja

A ngOnInit hook egyszer hívódik meg a komponens vagy direktíva inicializálása során, miután az Angular beállította az összes adat-kötött tulajdonságot (beleértve az `@Input()`-okat is) és az első ngOnChanges lefutott. Ez az egyik leggyakrabban használt életciklus hook.

Mikor használd?

Adatok aszinkron betöltésére (pl. HTTP kérések).
Komponens kezdeti beállításaira, amihez már szükségesek az `@Input()`-ok értékei.
Komplexebb inicializációs logika futtatására.
Service-ek injektálására és inicializálására.

Példa:

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service'; // Feltételezve, hogy létezik egy ilyen service
import { Observable } from 'rxjs';

@Component({
  selector: 'app-data-display',
  template: `
    <p *ngIf="data">Adatok: {{ data }}</p>
    <p *ngIf="!data">Adatok betöltése...</p>
  `
})
export class DataDisplayComponent implements OnInit {
  data: string | undefined;

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    console.log('ngOnInit triggered');
    // Adatok lekérése a service-ből
    this.dataService.fetchData().subscribe(result => {
      this.data = result;
    });
  }
}

Az ngOnInit az ideális hely a legtöbb inicializációs feladathoz, mivel ekkor már biztosak lehetünk abban, hogy az összes input property be van állítva, és a komponens készen áll a munkára.

3. `ngDoCheck` – A változásészlelés mélyére

A ngDoCheck hook minden változásészlelési ciklusban meghívódik, közvetlenül az ngOnChanges (ha volt input változás) és az ngOnInit (ha ez az első ciklus) után. Ez a hook extrém rugalmasságot biztosít, de nagy odafigyelést igényel, mivel teljesítményproblémákat okozhat, ha nem megfelelően használják.

Mikor használd?

Amikor az Angular alapértelmezett változásészlelési mechanizmusa (ami a primitív típusok és objektum referenciák változását figyeli) nem elegendő.
Például, ha egy `@Input()`-ként kapott objektum belső tulajdonságainak változását szeretnéd figyelni, anélkül, hogy az objektum referenciája megváltozna.
Egyedi, komplex változásészlelési logika implementálására.

Példa:

import { Component, Input, DoCheck, KeyValueDiffers, KeyValueDiffer } from '@angular/core';

interface User {
  name: string;
  age: number;
}

@Component({
  selector: 'app-user-profile',
  template: `
    <p>Felhasználó neve: {{ user.name }}</p>
    <p>Felhasználó kora: {{ user.age }}</p>
  `
})
export class UserProfileComponent implements DoCheck {
  @Input() user!: User;
  private differ!: KeyValueDiffer<string, any>; // Definíció után inicializálva

  constructor(private differs: KeyValueDiffers) { }

  ngOnInit() { // Fontos, hogy itt inicializáljuk, mivel ekkor már elérhető az @Input()
    this.differ = this.differs.find(this.user).create();
  }

  ngDoCheck(): void {
    const changes = this.differ.diff(this.user);
    if (changes) {
      console.log('ngDoCheck triggered: User object internal changes detected!', changes);
      changes.forEachChangedItem(record => {
        console.log(`Prop ${record.key} changed from ${record.previousValue} to ${record.currentValue}`);
      });
      // Itt végezhetnénk valamilyen logikát a belső változásokra reagálva
    }
  }
}

Mikor ne használd?

Ha az ngOnChanges vagy ngOnInit elegendő.
Általános célú inicializálásra vagy adatok lekérdezésére.
Nagyon óvatosan kell használni! Mivel minden változásészlelési ciklusban lefut, könnyen okozhat teljesítményproblémákat, ha komplex, erőforrásigényes műveleteket végzünk benne. Csak akkor nyúlj hozzá, ha pontosan tudod, mit csinálsz, és nincs más, hatékonyabb megoldás.

4. `ngAfterContentInit` – A beágyazott tartalom felkészülése

Az ngAfterContentInit hook egyszer hívódik meg, miután az Angular inicializálta a komponens projektált tartalmát (azaz azt a tartalmat, amit az <ng-content> tagekkel vetítünk bele a komponensbe).

Mikor használd?

Amikor a szülő komponens által a gyerek komponensbe beágyazott DOM elemeket vagy komponenseket szeretnéd elérni vagy manipulálni.
Ha egy @ContentChild vagy @ContentChildren lekérdezést használsz, az eredmények garantáltan elérhetők lesznek ebben a hookban.

Példa:

import { Component, AfterContentInit, ContentChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-content-projector',
  template: `
    <p>Szülő komponensben definiált tartalom:</p>
    <ng-content></ng-content>
    <p>------</p>
  `
})
export class ContentProjectorComponent implements AfterContentInit {
  @ContentChild('projectedParagraph') projectedParagraph!: ElementRef;

  ngAfterContentInit(): void {
    console.log('ngAfterContentInit triggered');
    if (this.projectedParagraph) {
      console.log('Elérhető a projektált bekezdés:', this.projectedParagraph.nativeElement.textContent);
      this.projectedParagraph.nativeElement.style.color = 'blue';
    }
  }
}
// Szülő komponensben így használhatod:
// <app-content-projector>
//   <p #projectedParagraph>Ez egy beágyazott bekezdés.</p>
// </app-content-projector>

5. `ngAfterContentChecked` – A beágyazott tartalom ellenőrzése

Az ngAfterContentChecked hook minden változásészlelési ciklusban meghívódik, miután az Angular ellenőrizte a komponens projektált tartalmát. Ez közvetlenül az ngAfterContentInit után fut le első alkalommal.

Mikor használd?

Amikor reagálnod kell a projektált tartalom változásaira.
Ha az ngAfterContentInit-ben végrehajtott műveletek után (pl. DOM manipuláció) további ellenőrzésekre vagy frissítésekre van szükség, és a projektált tartalom dinamikusan változhat.

Példa:

import { Component, AfterContentChecked, ContentChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-dynamic-content-checker',
  template: `
    <p>Dinamikus tartalom ellenőrzése:</p>
    <ng-content></ng-content>
  `
})
export class DynamicContentCheckerComponent implements AfterContentChecked {
  @ContentChild('dynamicContent') dynamicContent!: ElementRef;
  private lastContent: string = '';

  ngAfterContentChecked(): void {
    if (this.dynamicContent && this.dynamicContent.nativeElement.textContent !== this.lastContent) {
      this.lastContent = this.dynamicContent.nativeElement.textContent;
      console.log('ngAfterContentChecked triggered: Projected content changed!', this.lastContent);
      // Itt frissíthetjük a komponens állapotát a projektált tartalom alapján
    }
  }
}

6. `ngAfterViewInit` – A komponens nézetének felkészülése

Az ngAfterViewInit hook egyszer hívódik meg, miután az Angular inicializálta a komponens saját nézetét és a benne található gyermek komponensek nézetét.

Mikor használd?

Amikor a komponens saját HTML sablonjában definiált DOM elemeket vagy ViewChild komponenseket szeretnéd elérni és manipulálni.
Harmadik féltől származó JavaScript könyvtárak (pl. térkép widgetek, grafikonelemzők) inicializálására, amelyeknek szükségük van a DOM-ra.
@ViewChild vagy @ViewChildren lekérdezések eredményeinek felhasználására.

Példa:

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-view-manipulator',
  template: `
    <h2 #myHeading>Ez a komponens címe</h2>
    <p>Valamilyen tartalom.</p>
  `
})
export class ViewManipulatorComponent implements AfterViewInit {
  @ViewChild('myHeading') headingElement!: ElementRef;

  ngAfterViewInit(): void {
    console.log('ngAfterViewInit triggered');
    if (this.headingElement) {
      this.headingElement.nativeElement.style.backgroundColor = 'yellow';
      console.log('A cím háttere sárgára állítva.');
    }
  }
}

7. `ngAfterViewChecked` – A komponens nézetének ellenőrzése

Az ngAfterViewChecked hook minden változásészlelési ciklusban meghívódik, miután az Angular ellenőrizte a komponens saját nézetét és annak gyermek nézeteit. Ez közvetlenül az ngAfterViewInit után fut le első alkalommal.

Mikor használd?

Amikor reagálnod kell a komponens saját nézetében (és gyermek nézeteiben) bekövetkezett változásokra.
Ha egy ngAfterViewInit-ben végrehajtott műveletek után további ellenőrzésekre vagy frissítésekre van szükség, és a nézet dinamikusan változhat (pl. *ngIf vagy *ngFor miatt).
Fontos: ebben a hookban soha ne módosítsd közvetlenül a nézetben megjelenített adatokat, mivel az egy újabb változásészlelési ciklust indítana el, ami végtelen ciklushoz vezethet. Ha változtatnod kell, azt egy setTimeout segítségével vagy aszinkron műveletként tedd meg.

Példa:

import { Component, AfterViewChecked, ViewChild, ElementRef } from '@angular/core';
import { FormsModule } from '@angular/forms'; // FormsModule importálása szükséges az ngModel-hez

@Component({
  selector: 'app-view-checker',
  template: `
    <input type="text" #myInput [(ngModel)]="inputValue">
    <p>Input értéke: {{ inputValue }}</p>
  `,
  standalone: true, // Vagy importáld a FormsModule-öt a modulodba
  imports: [FormsModule]
})
export class ViewCheckerComponent implements AfterViewChecked {
  @ViewChild('myInput') inputElement!: ElementRef<HTMLInputElement>;
  inputValue: string = 'Kezdő érték';
  private lastInputValue: string = '';

  ngAfterViewChecked(): void {
    if (this.inputElement && this.inputElement.nativeElement.value !== this.lastInputValue) {
      this.lastInputValue = this.inputElement.nativeElement.value;
      console.log('ngAfterViewChecked triggered: Input value changed!', this.lastInputValue);
      // Itt végezhetnénk logikát az input változásaira reagálva
    }
  }
}

8. `ngOnDestroy` – A komponens búcsúja

A ngOnDestroy hook egyszer hívódik meg, közvetlenül azelőtt, hogy az Angular megsemmisítené a komponenst vagy direktívát. Ez a tökéletes hely a tisztító műveletek elvégzésére.

Mikor használd?

Leiratkozás Observable objektumokról, hogy elkerüld a memóriaszivárgást.
Eseménykezelők leválasztása a DOM-ról.
Időzítők (pl. setTimeout, setInterval) törlése.
Bármilyen erőforrás felszabadítása, amit a komponens hozott létre vagy használt.

Példa:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { interval, Subscription } from 'rxjs';

@Component({
  selector: 'app-timer',
  template: `<p>Idő: {{ currentTime }}</p>`
})
export class TimerComponent implements OnInit, OnDestroy {
  currentTime: number = 0;
  private timerSubscription!: Subscription;

  ngOnInit(): void {
    this.timerSubscription = interval(1000).subscribe(() => {
      this.currentTime++;
    });
  }

  ngOnDestroy(): void {
    console.log('ngOnDestroy triggered: Timer komponens megsemmisül.');
    // Fontos: Leiratkozás az Observable-ről
    if (this.timerSubscription) {
      this.timerSubscription.unsubscribe();
      console.log('Timer leiratkozás sikeres.');
    }
    // Esetleges egyéb tisztítás
  }
}

Legjobb gyakorlatok és tippek

Tarts tisztán a hookokat: Ne zsúfolj túl sok logikát egyetlen hookba. Próbáld meg a felelősségeket szétválasztani, és külön metódusokba szervezni a komplexebb feladatokat.
ngOnInit az alap: A legtöbb inicializációs és adatlekérdezési feladathoz az ngOnInit az ideális hely. Ez biztosítja, hogy a komponens készen áll a munkára, és az input adatok is rendelkezésre állnak.
Óvatosan az ngDoCheck-kel: Csak akkor használd, ha feltétlenül szükséges, és légy tisztában a teljesítményre gyakorolt hatásaival. Mindig mérlegeld, hogy van-e alternatív, kevésbé erőforrásigényes megoldás (pl. OnPush változásészlelési stratégia és async pipe).
Tisztíts ngOnDestroy-ban: Mindig gondoskodj arról, hogy az előfizetéseket, időzítőket és egyéb erőforrásokat felszabadítsd az ngOnDestroy hookban, hogy elkerüld a memóriaszivárgást és a teljesítményromlást. Használj takeUntil operátort RxJS Subject-tel az egyszerűbb leiratkozáshoz több Observable esetén.
DOM manipuláció: A DOM közvetlen manipulálását kerüld, ha lehet. Ha mégis szükséges, használd a Renderer2 szolgáltatást, és mindig az ngAfterViewInit vagy ngAfterContentInit hookokban tedd ezt, amikor a DOM már inicializálva van.

Összefoglalás

Az Angular életciklus hookok elsajátítása elengedhetetlen a hatékony és hibamentes Angular alkalmazások építéséhez. Mindegyik hook egy specifikus célt szolgál a komponens életútja során, és a megfelelő hook kiválasztása kulcsfontosságú a kód tisztaságának és teljesítményének szempontjából. Reméljük, ez a részletes útmutató segít abban, hogy magabiztosan navigálj az Angular komponens életciklus fázisai között, és a megfelelő pillanatban avatkozz be a logikáddal. Gyakorlással és odafigyeléssel hamar a kezedre állnak majd ezek a hatékony eszközök, és professzionálisabb Angular alkalmazásokat hozhatsz létre. Jó kódolást!