GEDOPLAN
Webprogrammierung

Angular, Lifecycle Methoden

Webprogrammierung

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Bitte füllen Sie dieses Feld aus.
Bitte füllen Sie dieses Feld aus.
Bitte gib eine gültige E-Mail-Adresse ein.
Sie müssen den Bedingungen zustimmen, um fortzufahren.

Autor

Diesen Artikel teilen

LinkedIn
Xing

Gibt es noch Fragen?

Fragen beantworten wir sehr gerne! Schreibe uns einfach per Kontaktformular.

Kurse

weitere Blogbeiträge

IT-Training - GEDOPLAN
Webprogrammierung

Angular, testen mit Karma/Jasmine

Anwendungen zu testen ist ein leidiges Thema und wird gerne aus Zeitgründen vernachlässigt. Jeder der schon mal ein größeres Refactoring…

Work Life Balance. Jobs bei Gedoplan

We are looking for you!

Lust bei GEDOPLAN mitzuarbeiten? Wir suchen immer Verstärkung – egal ob Entwickler, Dozent, Trainerberater oder für unser IT-Marketing! Schau doch einfach mal auf unsere Jobseiten! Wir freuen uns auf Dich!

Work Life Balance. Jobs bei Gedoplan

We are looking for you!

Lust bei GEDOPLAN mitzuarbeiten? Wir suchen immer Verstärkung – egal ob Entwickler, Dozent, Trainerberater oder für unser IT-Marketing! Schau doch einfach mal auf unsere Jobseiten! Wir freuen uns auf Dich!