Angular - haki cyklu życia komponentu (lifecycle hooks)

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 3599 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:

export class myFirstComponent implements OnInit { @Input() title: string = ''; constructor() { } ngOnInit() { this.title = 'Tytuł strony: ' + this.title; } logIt(msg: string) { this.logger.log(`#${nextId++} ${msg}`); } }

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.

ngOnDestroy() { console.log('Komponent zniszczony'); }

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:

@Input() title: string = ''; ngOnChanges(changes: SimpleChanges) { for (let name in changes) { const changes = changes[propName]; const current = JSON.stringify(chng.currentValue); const previous = JSON.stringify(chng.previousValue); console.log(`${name}: Wartość bieżąca = ${current}, wartość poprzednia = ${previous}`); } }

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.

@Input() student: { name: 'Grzegorz', surname: 'Brzęczyszczykiewicz' }; ngOnCheck() { if (this.student.name !== 'Grzegorz') { console.log(this.student.name, ' !== "Grzegorz"'); } }

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.

@ViewChild('element', {static: true}) element: ElementRef; // przechwytywanie elementu HTML komponentu, które nastąpi po załadowaniu widoku constructor() { console.log('constructor', element); } ngOnAfterViewInit() { console.log('ngOnAfterViewInit', element); }

W kodzie HTML wystarczy umieścić taki oto element:

<div #element>Przykładowy element HTML przechwytywany za pomocą dekoratora <strong class="Angular decorator">ViewChild</strong></div>

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.

ngOnAfterViewChecked() { console.log('ngAfterViewChecked'); }

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:

<app-my-first><div>Jakiś dodatkowy komponent zewnętrzny</div></app-my-first>

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:

<div>Jakiś wewnętrzny element komponentu</div> <ng-content></ng-content> <div>Kolejny wewnętrzny element komponentu</div>

Hak ngAfterContentInit jest uruchamiany, gdy zawartość elementów pochodzących z komponentu nadrzędnego zostanie zainicjalizowana.

ngAfterContenInit() { console.log('ngAfterConentInit'); }

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.

@ContentChild('childComponent', {static: false}) childComponent: ElementRef; ngAfterContentChecked() { console.log('ngAfterContentChecked', this.childComponent); }
Powiązane strony:
strony powiązane
  1. angular.io - strona dokumentacji Angulara
Propozycje książek
tytuł: Angular. Profesjonalne techniki programowania. Wydanie IV autor: Adam Freeman

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ł:

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ł:

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 instalacja i działanie. Nauka krok po kroku

Autor:

Shyam Seshadri

tytuł: Angular w akcji autor: Jeremy Wilken

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ł:

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. 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. Programowanie z użyciem języka TypeScript

Autor:

Yakov Fain, Anton Moiseev

tytuł: Angular 2. Tworzenie interaktywnych aplikacji internetowych autor: Gion Kunz

Tytuł:

Angular 2. Tworzenie interaktywnych aplikacji internetowych

Autor:

Gion Kunz

W związku z tym, że firma Helion nie wywiązuje się z swoich zobowiązań naliczania prowizji za każdą zakupioną książkę a kontakt z ową frmą jest nie możliwy autor strony zmuszony został do zablokowania linkowania książek. Za wszelkie niedogodności z tym związane z góry przepraszam i obiecuję włączenie linkowania gdy tylko sprawa zostanie wyjaśniona