Lifecycle Hooks (haki życia komponentu)

Lifecycle Hooks, czyli haki życia komponentu, to specjalne metody w Angularze, które oferują możliwość interwencji w różne momenty cyklu życia komponentów i dyrektyw. Dzięki nim, deweloperzy mogą wykonywać określone akcje w kluczowych momentach, takich jak inicjalizacja komponentu, detekcja zmian, czy też jego zniszczenie.

Podstawowe Lifecycle Hooks

W Angularze istnieje kilka głównych haków życia komponentu, które pomagają zarządzać różnymi aspektami działania komponentu:

1. ngOnInit: Wywoływany raz, po pierwszym wyświetleniu danych związanych z komponentem.
2. ngOnChanges: Wywoływany, kiedy Angular wykryje zmiany w danych wejściowych komponentu.
3. ngDoCheck: Można używać do manualnego sprawdzania zmian w komponencie.
4. ngAfterContentInit: Wywoływany po wstawieniu treści do widoku komponentu.
5. ngAfterContentChecked: Wywoływany po sprawdzeniu zawartości włożonej przez Angular.
6. ngAfterViewInit: Wywoływany po inicjalizacji widoku komponentu i jego dzieci.
7. ngAfterViewChecked: Wywoływany po każdym sprawdzeniu widoku komponentu i jego dzieci.
8. ngOnDestroy: Wywoływany tuż przed usunięciem komponentu z DOM.

Przykład Użycia Lifecycle Hooks w Komponencie

Załóżmy, że tworzymy komponent UserProfileComponent, który wykorzystuje kilka ważnych lifecycle hooks, aby zarządzać danymi użytkownika.

1. Definicja Komponentu

// user-profile.component.ts
import { Component, Input, OnInit, OnDestroy, SimpleChanges, OnChanges } from '@angular/core';

@Component({
  selector: 'app-user-profile',
  standalone: true,
  template: `<p>Profil użytkownika: {{ userData.name }}</p>`,
  styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent implements OnInit, OnChanges, OnDestroy {
  @Input() userData: { name: string, age: number };

  constructor() {
    console.log('UserProfileComponent constructed');
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log('NgOnChanges triggered:', changes);
  }

  ngOnInit(): void {
    console.log('Component initialized with data:', this.userData);
  }

  ngOnDestroy(): void {
    console.log('Component is being destroyed');
  }
}

Użycie Komponentu w Aplikacji

<!-- Some parent component template -->
<app-user-profile [userData]="currentUser"></app-user-profile>

Wyjaśnienie Kodu

• Konstruktor (constructor): Używany do inicjalizacji podstawowych wartości, serwisów lub innych zależności. Nie jest to lifecycle hook, ale jest ważnym elementem inicjalizacji klasy w Angularze.
• ngOnChanges: Reaguje na zmiany w @Input() properties. W przykładzie rejestruje zmiany w danych wejściowych userData.
• ngOnInit: Idealne miejsce do inicjalizacji komponentu, np. pobrania danych z serwera. W przykładzie loguje dane użytkownika po ich inicjalizacji.
• ngOnDestroy: Umożliwia wykonanie sprzątania, takiego jak anulowanie subskrypcji obserwabli. W przykładzie loguje informacje o zniszczeniu komponentu.