Angular, Lifecycle Methoden

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.

demo.png

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.

Demo-Projekt @ Github

Advertisements

Über Dominik Mathmann
Dominik Mathmann arbeitet als Berater, Entwickler und Trainer bei der GEDOPLAN GmbH. Auf Basis seiner langjährigen Erfahrung in der Implementierung von Java-EE-Anwendungen leitet er Seminare, hält Vorträge und unterstützt Kunden bei der Konzeption und Realisierung von Webanwendungen vom Backend bis zum Frontend. Sein derzeitiger Schwerpunkt liegt dabei auf der Entwicklung von JSF-Anwendungen. Er sieht die stärker werdende Position von JavaScript-Frameworks jedoch positiv und beschäftigt sich darüber hinaus mit Webframeworks wie AngularJS.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: