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