Komponenten und Lebenszyklus
Component lifecycle hooks, ngOnInit, ngOnChanges, ngOnDestroy, ngAfterViewInit, component communication, @Input, @Output
1Was ist ein Lifecycle-Hook in Angular?
Was ist ein Lifecycle-Hook in Angular?
Antwort
Ein Lifecycle-Hook ist eine spezielle Methode, die von Angular zu Schlüsselmomenten im Lebenszyklus einer Komponente oder Direktive automatisch aufgerufen wird. Diese Hooks ermöglichen die Ausführung von Code in bestimmten Phasen wie Erstellung, Aktualisierung oder Zerstörung. Die häufigsten Hooks sind ngOnInit, ngOnChanges und ngOnDestroy.
2Wann wird ngOnInit aufgerufen?
Wann wird ngOnInit aufgerufen?
Antwort
ngOnInit wird einmal nach dem ersten ngOnChanges aufgerufen, sobald alle @Input-Eigenschaften initialisiert wurden. Es ist der ideale Hook zum Initialisieren von Komponentendaten, zum Starten von Subscriptions oder zum Aufrufen von Services. Er ist dem Constructor für Initialisierungslogik vorzuziehen, da alle Bindings garantiert verfügbar sind.
3Was ist der Hauptunterschied zwischen ngOnChanges und ngOnInit?
Was ist der Hauptunterschied zwischen ngOnChanges und ngOnInit?
Antwort
ngOnChanges wird jedes Mal aufgerufen, wenn sich der Wert einer @Input-Eigenschaft ändert, und empfängt ein SimpleChanges-Objekt mit alten und neuen Werten. ngOnInit wird nur einmal nach der ersten Initialisierung aufgerufen. Verwenden Sie ngOnChanges, um auf Input-Änderungen zu reagieren und Logik zu implementieren, die von @Input-Werten abhängt. Bevorzugen Sie ngOnInit für einmalige Initialisierung wie API-Aufrufe oder Erstkonfiguration.
Warum ngOnDestroy in einer Komponente verwenden?
In welcher Reihenfolge werden Lifecycle-Hooks beim Erstellen einer Komponente aufgerufen?
+17 Interview-Fragen
Weitere Angular-Interviewthemen
TypeScript-Grundlagen
TypeScript Fortgeschritten
Angular-Grundlagen
Services & Dependency Injection
Angular-Modul-Organisation
Angular CLI
Direktiven und Pipes
Routing und Navigation
Reactive Forms
Template-driven Forms
RxJS-Grundlagen
RxJS-Operatoren
HttpClient und API-Aufrufe
Grundlegende State-Verwaltung
Change Detection
Angular Signals
Standalone Components
Angular Unit-Tests
End-to-End-Testing
Build und Optimierung
NgRx-Grundlagen
NgRx Fortgeschritten
Angular-Architektur
Performance-Optimierung
Sicherheit und Best Practices
Fortgeschrittene RxJS-Patterns
Angular Universal und SSR
Angular Micro-Frontends
Meistere Angular für dein nächstes Interview
Zugang zu allen Fragen, Flashcards, technischen Tests, Code-Review-Übungen und Interview-Simulatoren.
Kostenlos starten