Angular 2
Lebenszyklus-Haken

Bemerkungen

OnInit

Wird ausgelöst, wenn Komponenten- oder Anweisungseigenschaften initialisiert wurden.

(Vor denen der Kinderrichtlinien)

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'so-oninit-component',
    templateUrl: 'oninit-component.html',
    styleUrls: ['oninit-component.']
})
class OnInitComponent implements OnInit {

    ngOnInit(): void {
        console.log('Component is ready !');
    }
}

OnDestroy

Wird ausgelöst, wenn die Komponenten- oder Direktiveninstanz zerstört wird.

import { Component, OnDestroy } from '@angular/core';

@Component({
    selector: 'so-ondestroy-component',
    templateUrl: 'ondestroy-component.html',
    styleUrls: ['ondestroy-component.']
})
class OnDestroyComponent implements OnDestroy {

    ngOnDestroy(): void {
        console.log('Component was destroyed !');
    }
}

OnChanges

Wird ausgelöst, wenn eine oder mehrere der Komponenten- oder Anweisungseigenschaften geändert wurden

import { Component, OnChanges, Input } from '@angular/core';

@Component({
    selector: 'so-onchanges-component',
    templateUrl: 'onchanges-component.html',
    styleUrls: ['onchanges-component.']
})
class OnChangesComponent implements OnChanges {
    @Input() name: string;
    message: string;
    
    ngOnChanges(changes: SimpleChanges): void {
        console.log(changes);
    }
}

Bei Änderung wird das Ereignis protokolliert

name: {
    currentValue: 'new name value',
    previousValue: 'old name value'
},
message: {
    currentValue: 'new message value',
    previousValue: 'old message value'
}

AfterContentInit

Feuer, nachdem die Initialisierung des Inhalts der Komponente oder der Direktive abgeschlossen ist.

(Gleich nach OnInit)

import { Component, AfterContentInit } from '@angular/core';

@Component({
    selector: 'so-aftercontentinit-component',
    templateUrl: 'aftercontentinit-component.html',
    styleUrls: ['aftercontentinit-component.']
})
class AfterContentInitComponent implements AfterContentInit {

    ngAfterContentInit(): void {
        console.log('Component content have been loaded!');
    }
}

AfterContentChecked

Feuer, nachdem die Ansicht vollständig initialisiert wurde.

(Nur für Komponenten verfügbar)

import { Component, AfterContentChecked } from '@angular/core';

@Component({
    selector: 'so-aftercontentchecked-component',
    templateUrl: 'aftercontentchecked-component.html',
    styleUrls: ['aftercontentchecked-component.']
})
class AfterContentCheckedComponent implements AfterContentChecked {

    ngAfterContentChecked(): void {
        console.log('Component content have been checked!');
    }
}

AfterViewInit

Wird ausgelöst, nachdem die Komponentenansicht und eine ihrer untergeordneten Ansichten initialisiert wurde. Dies ist ein nützlicher Lebenszyklus-Hook für Plugins außerhalb des Angular 2-Ökosystems. Mit dieser Methode können Sie beispielsweise eine jQuery-Datumsauswahl basierend auf der von Angular 2 gerenderten Markierung initialisieren.

import { Component, AfterViewInit } from '@angular/core';

@Component({
    selector: 'so-afterviewinit-component',
    templateUrl: 'afterviewinit-component.html',
    styleUrls: ['afterviewinit-component.']
})
class AfterViewInitComponent implements AfterViewInit {

    ngAfterViewInit(): void {
        console.log('This event fire after the content init have been loaded!');
    }
}

AfterViewChecked

Feuer, nachdem die Überprüfung der Ansicht der Komponente abgeschlossen ist.

(Nur für Komponenten verfügbar)

import { Component, AfterViewChecked } from '@angular/core';

@Component({
    selector: 'so-afterviewchecked-component',
    templateUrl: 'afterviewchecked-component.html',
    styleUrls: ['afterviewchecked-component.']
})
class AfterViewCheckedComponent implements AfterViewChecked {

    ngAfterViewChecked(): void {
        console.log('This event fire after the content have been checked!');
    }
}

DoCheck

Ermöglicht das Abhören von Änderungen nur für angegebene Eigenschaften

import { Component, DoCheck, Input } from '@angular/core';

@Component({
    selector: 'so-docheck-component',
    templateUrl: 'docheck-component.html',
    styleUrls: ['docheck-component.']
})
class DoCheckComponent implements DoCheck {
    @Input() elements: string[];
    differ: any;
    ngDoCheck(): void {
        // get value for elements property
        const changes = this.differ.diff(this.elements);
        
        if (changes) {
            changes.forEachAddedItem(res => console.log('Added', r.item));
            changes.forEachRemovedItem(r => console.log('Removed', r.item));
        }
    }
}