Lifecycle hooks sind Methoden, die Angular zu bestimmten Zeitpunkten im Leben einer Komponente aufruft — Erstellung, Input-Änderungen, Rendering und Zerstörung. Sie implementieren sie, indem Sie Schnittstellenmethoden zu Ihrer Komponentenklasse hinzufügen.
{ , , , , } ;
({ ... })
, , {
() {
}
() {
}
() {
}
}
constructor → DI happens; inputs NOT yet available
ngOnChanges → when @Input values are set/changed
ngOnInit → once, after first ngOnChanges ★ (init, fetch data)
ngDoCheck → every change detection run (custom change detection)
ngAfterContentInit → projected content (<ng-content>) initialized
ngAfterViewInit → the component's view + child views ready ★ (access @ViewChild)
ngAfterViewChecked → after each view check
ngOnDestroy → before removal ★ (unsubscribe, clear timers)
ngOnInit() {
this.userService.getUsers().subscribe(u => this.users = u); // init/fetch — inputs are ready
}
ngAfterViewInit() {
this.chart.nativeElement.focus(); // the DOM/@ViewChild exists now
}
ngOnDestroy() {
this.subscription.unsubscribe(); // prevent memory leaks!
clearInterval(this.timer);
}
ngOnInit — der Standard-Ort für Initialisierung und Datenbeschaffung (anders als im Konstruktor sind @Inputs hier verfügbar).ngAfterViewInit — wenn Child-Views und @ViewChild-Referenzen existieren.ngOnDestroy — Bereinigung: Abmelden von Observables, Timer löschen, Listener entfernen.Der Konstruktor sollte nur DI durchführen; Eingaben sind dort noch nicht gebunden. ngOnInit läuft, nachdem Angular die Komponente und ihre Eingaben eingerichtet hat — der richtige Ort für Startup-Logik.
Lifecycle Hooks ermöglichen es Ihnen, Logik zum richtigen Zeitpunkt auszuführen — initialisieren Sie in ngOnInit, greifen Sie in ngAfterViewInit auf die gerenderte Ansicht zu, und wichtig: räumen Sie in ngOnDestroy auf (Abmeldung von Observables ist der beste Weg, um Memory Leaks in Angular zu vermeiden).
Die Kenntnis der Reihenfolge und der Rolle jedes Hooks ist für ordnungsgemäße Datenbeschaffung, DOM-Zugriff und Ressourcenmanagement unerlässlich.