sobota, 11 maja 2024

Angular LifeCycle Hooks

ngOnChanges()

Wywołuje się gdy Angular ustawia lub resetuje właściwości wejściowe powiązane z danymi. Metoda otrzymuje obiekt SimpleChanges. 
Uwaga - odpala się jako pierwszy, ale tylko gdy komponent posiada @Input().

ngOnInit()

Inicjalizuje dyrektywę lub komponent po tym, jak Angular wyświetli właściwości powiązane z danymi i ustawi właściwości wejściowe dyrektywy lub komponentu. 
Uwaga - odpala się jako drugi, po ngOnChanges().

ngDoCheck()

Wywołuje się wraz ze zmianami których Angular nie może lub nie chce sprawdzać samodzielnie. Może służyć do stworzenia własnego CD. Dzięki niemu, można reagować na zmiany pól, które nie są @Inputami().
Wywołuje się po każdym ngOnChanges()

ngAfterContentInit()

Wywołuje się gdy Angular zakończy inicjalizacje komponentów zagnieżdżonych za pomocą content projection.
Wywołuje się raz po pierwszym ngDoCheck()

ngAfterContentChecked()

Wywołuje się gdy Angular sprawdził content projection w dyrektywie lub komponencie. 
Wywołuje się po ngAfterContentInit() i po każdym ngDoCheck()

ngAfterViewInit()

Reaguje na zainicjalizowanie widoków komponentu i widoków podrzędnych, lub widoku zawierającego dyrektywę. Prościej - odpali się, gdy komponent ma zaincjalizowany widok.

Wywołuje się raz po pierwszym ngAfterContentChecked()

ngAfterViewChecked()

Domyślny change detector skończył sprawdzanie zmian widoku komponentu
Wywołuje się po ngAfterViewInit() i po każdym ngAfterContentChecked()

ngOnDestroy()

Wywołany zaraz przed zniszczeniem dyrektywy lub komponentu

Wnioski

Po ngDoCheck() w komponencie wywołują się zawsze
  • ngAfterContentInit() - tylko po pierwszym
  • ngAfterViewInit() - tylko po pierwszym
  • ngAfterContentChecked() - po każdym (przed afterViewChecked())
  • ngAfterViewChecked() - po każdym (po afterContentChecked())

 

Czy serwisy mogą mieć swoje LifeCycleHooks? 

Tak, jeśli są dodane do tablicy providers do komponentu, to ngOnDestroy w serwisie wywoła się po usunięciu komponentu.

Brak komentarzy:

Prześlij komentarz