Change Detection
Zone.js, Change-Detection-Strategien, OnPush-Strategie, ChangeDetectorRef, markForCheck, detectChanges, Performance-Optimierung
1Was ist der Change-Detection-Mechanismus in Angular?
Was ist der Change-Detection-Mechanismus in Angular?
Antwort
Change Detection ist der Prozess, durch den Angular Änderungen am Anwendungszustand erkennt und das DOM entsprechend aktualisiert. Standardmäßig verwendet Angular Zone.js, um asynchrone Ereignisse (clicks, HTTP requests, timers) automatisch zu erkennen, und löst die Komponentenprüfung von der Wurzel aus aus. Diese Prüfung durchläuft den Komponentenbaum, um Änderungen zu identifizieren, die auf das DOM anzuwenden sind.
2Welche Rolle spielt Zone.js bei der Angular Change Detection?
Welche Rolle spielt Zone.js bei der Angular Change Detection?
Antwort
Zone.js ist eine Bibliothek, die native asynchrone Browser-APIs (setTimeout, Promise, addEventListener usw.) patcht, um deren Ausführung abzufangen. Wenn eine asynchrone Operation abgeschlossen ist, benachrichtigt Zone.js Angular, das automatisch die Change Detection von der Wurzelkomponente aus auslöst. Dies ermöglicht es Angular, Änderungen ohne manuelles Eingreifen des Entwicklers zu erkennen.
3Was ist der Unterschied zwischen Default- und OnPush-Strategien?
Was ist der Unterschied zwischen Default- und OnPush-Strategien?
Antwort
Die Default-Strategie prüft bei jedem Change-Detection-Zyklus alle Komponenten im Baum, was teuer sein kann. OnPush optimiert, indem eine Komponente nur geprüft wird, wenn sich ihre Inputs ändern (unveränderliche Referenzen), ein Ereignis aus ihrem Template ausgelöst wird, eine Async-Pipe einen neuen Wert empfängt oder markForCheck() manuell aufgerufen wird. OnPush reduziert die Prüfungen drastisch und verbessert die Performance.
Wie aktiviert man die OnPush-Strategie für eine Komponente?
Wozu dient ChangeDetectorRef in einer Angular-Komponente?
+17 Interview-Fragen
Weitere Angular-Interviewthemen
TypeScript-Grundlagen
TypeScript Fortgeschritten
Angular-Grundlagen
Komponenten und Lebenszyklus
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
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