Angular - haki cyklu życia komponentu (lifecycle hooks)
Stronę tą wyświetlono już: 3493 razy
Wstęp
Angular dysponuje metodami, które w określonym cyklu życia komponentu (lifecycle hooks) są uruchamiane. Aby jednak to mogło nastąpić trzeba najpierw zadeklarować w komponencie klasy odpowiednią metodę. I tutaj Angular wymyślił specjalne interfejsy, które po zaimplementowaniu w deklaracji klasy komponentu wymuszają obsługę odpowiedniej funkcji. Nie jest to wymagane, ale niektóre dodatki płaczą o dodanie implementacji tego interfejsu co jest nieco pozbawione sensu, gdyż i tak trzeba wiedzieć jakiej metody użyć, aby w danym cyklu życia komponentu móc wykonać określoną operację.
ngOnInit
ngOnInit jest to metoda klasy wywoływana automatycznie tylko raz gdy po raz pierwszy Angular wyświetli powiązane dane i właściwości oraz ustawi wartości wejściowe komponentu.
Angular udostępnia specjalne interfejsy, po których implementacji wymusza automatycznie obsługę danego haka. Dla ngOnInit będzie to interfejs OnInit. Oto przykład użycia tego haka:
ngOnDestroy
Gdy komponent jest niszczony czasem trzeba zrobić parę innych rzeczy, zanim to nastąpi. I tutaj z odsieczą biegnie na pomoc hak o nazwie ngOnDestroy.
Oczywiście Angular ma do wymuszania obsługi tego haka interfejs OnDestroy.
ngOnChanges
Gdy jakaś zmienna wejściowa komponentu ulega zmianie, ta metoda zostanie wywołana z jednym parametrem zawierającym dane dotyczące zmian, jakie zostały wykryte. Oto przykład:
W tym przypadku klasa może zostać rozszerzona o interfejs OnChanges. Jeżeli w kodzie klasy jakaś zmienna podpięta pod kontrolkę ulegnie zmianie, hak ngOnChanges zostanie wywołana automatycznie podając nazwę zmiennej, jej wartość przed i po modyfikacji.
ngOnCheck
Ten hak uruchamiany jest zaraz po ngOnInit oraz gdy uruchamia się detektor zmian. Rozszerza on działanie ngOnChange, który reaguje jedynie na zmianę referencji obserwowanego obiektu, nie zaś na zmianę jego właściwości.
W Angular-ze istnieje interfejs ngOnCheck wymuszający obsłużenie tego haka, nie jest on jednak tak na prawdę wymagany.
ngAfterViewInit
Każdy komponent jest połączony z plikiem HTML lub okrojonym jego szablonem. Zanim widok i całe drzewo dokumentu DOM się wyrenderuje potrzebna jest dłuższa lub krótsza chwila. Zdarza się, że ta chwila następuje po ustawieniu zmiennych komponentu, przez co niektóre dane mogą się nie wyświetlać lub niektóre komponenty mogą nie działać prawidłowo. Z odsieczą przybywa tutaj hak ngAfterViewInit, który jest odpalany gdy widok strony zostanie wyrenderowany.
W kodzie HTML wystarczy umieścić taki oto element:
Wynik w konsoli przeglądarki będzie wyglądał następująco:
constructor undefined ngOnAfterViewInit Object { nativeElement: div.example }
ngAfterViewChecked
Tej hak Angular-owy uruchamiany jest po wygenerowaniu widoku komponentu oraz gdy nastąpi zmiana widoku komponentu.
ngAfterContentInit
Tworząc komponent i osadzając go wewnątrz innego komponentu można pomiędzy jego znacznikami zamieścić dodatkową zawartość, które domyślnie nie zostanie osadzona wewnątrz komponentu. Oto przykład:
Element osadzony wewnątrz komponentu MyFirstComponent nie zostanie wyświetlony w jego wnętrzu chyba, że w jego wnętrzu użyta zostanie dyrektywa ng-content w następujący sposób:
Hak ngAfterContentInit jest uruchamiany, gdy zawartość elementów pochodzących z komponentu nadrzędnego zostanie zainicjalizowana.
ngAfterContentChecked
Ten hak również dotyczy elementów pochodzących z nadrzędnego komponentu, które zostały osadzone w jego wnętrzu. Jest on uruchamiany zaraz po haku ngAfterContentInit oraz za każdym razem, gdy nastąpi zmiana w tychże elementach.
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie IV
Autor:
Adam Freeman
Tytuł:
Angular. Programowanie z użyciem języka TypeScript. Wydanie II
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
ASP.NET Core, Angular i Bootstrap. Kompletny przybornik front-end developera
Autor:
Simone Chiaretta
Tytuł:
Angular instalacja i działanie. Nauka krok po kroku
Autor:
Shyam Seshadri
Tytuł:
Angular w akcji
Autor:
Jeremy Wilken
Tytuł:
ASP.NET Core 2 i Angular 5. Przewodnik dla Full-Stack Web Developera
Autor:
Valerio De Sanctis
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie II
Autor:
Adam Freeman
Tytuł:
Angular 2. Programowanie z użyciem języka TypeScript
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
Angular 2. Tworzenie interaktywnych aplikacji internetowych
Autor:
Gion Kunz