Mittels Lifecycle Methoden bietet Angular uns die Möglichkeit an bestimmten Stellen des Lebenszyklus einer Komponente ein zu greifen um z.B. Initialisierungen vor zu nehmen. Dieser Beitrag stellt die unterschiedlichen Methoden kurz vor.
Die Implementierung von Lifecycle Methoden ist denkbar einfach. Es genügt innerhalb der eigenen Komponente eine entsprechende Methode zu implementieren und Angular sorgt dafür das diese aufgerufen wird. Bei der Arbeit mit TypeScript ist es allerdings empfehlenswert das entsprechende Interface zu verwenden, sodass der Compiler bereits darauf aufmerksam machen kann das die gewünschte Lifecycle Methode eventuell nicht oder nicht korrekt implementiert ist.
import {Component, OnInit,} from '@angular/core';
@Component({...})
export class BoxComponent implements OnInit {
ngOnInit() {...}
ngOnChanges() {...}
}
Werfen wir einen Blick auf die von Angular zur Verfügung gestellten Methoden:
constructor
Keine „echte“ Lifecycle Methode von Angular, hier sollte möglichst wenig Logik implementieren werden. Die primäre Aufgabe innerhalb des Konstruktors besteht darin Dependency Injection zu steuern und zu verarbeiten
ngOnInit
Dient zu Initialisierung der eigener Komponente. An dieser Stelle sind eventuell vorhandene @Input-Parameter bereits vorhanden. Grundlegende Initialisierungen gehören in diese Methode.
ngOnChange
Diese Methode wird einmalig nach der ngOnInit-Methode aufgerufen und dann bei jeder Änderung der Input-Parameter. Müssen die Input-Parameter zur Initialisierung unserer Komponente in irgendeiner Art und Weise verarbeitet werden (z.B. eine Datums-Komponente erhält einen Date-String, arbeitet intern aber mit einem Date-Objekt) sollten diese Aufgaben nicht in der ngOnInit Methode, sondern hier implementiert werden.
ngAfterContentInit
Initialisierung der @ContentChildren-Komponenten. Die View-Query zum auffinden der mittels @ContentChildren annotierten Kind-Komponenten wird vor dieser Methode durchgeführt, sodass alle Content- (nicht aber die View-)-Children zur Verfügung stehen
ngAfterViewInit
Initialisierung der @ViewChildren-Komponenten. Die View-Query zum auffinden der mittels @ViewChildren annotierten Objekte wird vor dieser Methode durchgeführt, sodass alle nun auch alle View-Children zur Verfügung stehen
ngOnDestroy
Wird aufgerufen wenn die Komponente aus dem DOM-Baum entfernt wird, z.B. bei einem Routing oder Ausblenden über *ngIf.
ngAfterContentChecked | ngAfterViewChecked.
Angular Change Detection Methoden, kann Verwendet werden um den Lebenszyklus/ChangDetection zu protokollieren
ngDoCheck
Methode in der eine eigene Change Detection implementiert werden kann. Diese Methode sollte nur in Ausnahmefällen verwendet werden und mit möglichst wenig Logik versehen werden, da diese Methode sehr häufig aufgerufen wird. Ein Beispiel wann so etwas nötig ist: die „ngOnChange“ Methode wird nur dann bei Änderungen der Input Parameter aufgerufen wenn sich der Parameter selber ändert, wird hier ein Objekt verwendet und es ändert sich lediglich ein Attribut des Objektes wird die ngOnChange Methode nicht aufgerufen.
