Angular 18, ver?ffentlicht am 22. Mai 2024, führte einen experimentellen Game-Changer ein: zonenlose Angular-Anwendungen. Dadurch wird die Abh?ngigkeit von Zone.js eliminiert, die Leistung gesteigert, der Overhead reduziert und das Debuggen vereinfacht. Schauen wir uns die zonenlosen Anwendungen, ihre Vorteile und das Experimentieren mit dieser Funktion genauer an.

Grundlegendes zur ?nderungserkennung von Angular (ohne Zone)

?nderungserkennung h?lt das DOM mit den Komponentendaten synchronisiert. Bisher verlie? sich Angular auf Zone.js. Die ?nderungserkennung wird auf folgende Weise ausgel?st:

• Benutzerinteraktionen:Schaltfl?chenklicks, Texteingabe.
• Asynchrone Vorg?nge: HTTP-Anfragen, setTimeout, setInterval, versprochene Aufl?sungen.
• Manuelle Ausl?ser: ApplicationRef.tick(), ChangeDetectorRef.detectChanges().

Zone.js hat die Browser-APIs gepatcht und Angular benachrichtigt, um die ?nderungserkennung einzuleiten. Dies war zwar effektiv, verursachte jedoch zus?tzlichen Aufwand und verursachte manchmal ExpressionChangedAfterItHasBeenCheckedError.

Beispiele zur ?nderungserkennung (ohne Zone)

Vor der zonenlosen ?nderungserkennung verwaltete Zone.js UI-Updates. Dieses StackBlitz-Beispiel veranschaulicht:

1. Aktualisierung der Event-Handler-Eigenschaft: Durch Klicken auf eine Schaltfl?che wird ein Z?hler aktualisiert. Zone.js f?ngt ?nderungen ab, plant die Erkennung von ?nderungen und aktualisiert die Benutzeroberfl?che.
2. Asynchrone Eigenschaftsaktualisierung: Ein Intervall aktualisiert eine Eigenschaft. Zone.js erkennt den asynchronen Vorgang und aktualisiert die Benutzeroberfl?che.
3. HTTP-Daten (Array):über HTTP abgerufene Daten werden in einem Array gespeichert; Die standardm??ige ?nderungserkennung von Angular aktualisiert die Ansicht. Bei ChangeDetectionStrategy.OnPush wird die Ansicht jedoch durch direkte Array-Mutationen m?glicherweise nicht aktualisiert, es sei denn, die Referenz?nderungen oder die ?nderungserkennung werden manuell ausgel?st.
4. HTTP-Daten (Async Pipe): AsyncPipe vereinfacht die beobachtbare Handhabung, automatisches Abonnieren und Ausl?sen der ?nderungserkennung.
5. HTTP-Daten (Signal):Winkelsignale (eine moderne Funktion) benachrichtigen abh?ngige Leser direkt und optimieren Aktualisierungen unabh?ngig von Zone.js.

Diese Beispiele verdeutlichen die Rolle von Zone.js bei der ?nderungserkennung und bereiten die Grundlage für die verbesserte zonenlose Architektur von Angular.

Warum Zoneless w?hlen?

Das Entfernen von Zone.js bietet erhebliche Vorteile:

• Vereinfachte ?nderungserkennung:Weniger ExpressionChangedAfterItHasBeenCheckedErrorProbleme und zonenbezogene Komplexit?ten.
• Reduzierter Overhead: Ein leichteres Framework, das die Leistung verbessert.
• Verbessertes Debugging: Bessere Kontrolle der ?nderungserkennung, einfachere Identifizierung von Leistungsengp?ssen.

Konfigurieren einer zonenlosen Angular-Anwendung

Der Wechsel zu zonenlos erfordert Konfigurations?nderungen:

1. Zonenlose ?nderungserkennung aktivieren: Fügen Sie in app.config.ts Folgendes hinzu:

providers: [
  provideExperimentalZonelessChangeDetection()
]

Entfernen Sie provideZoneChangeDetection(), falls vorhanden.

2. Zone.js-Importe entfernen:

• L?schen Sie import '*zone.js'; aus Ihren Bewerbungsdateien.
• Entfernen Sie in angular.json zone.js aus dem polyfills-Array:

"polyfills": []

3. Zone.js deinstallieren:

npm uninstall zone.js

?nderungserkennung ohne Zone.js testen

Dieses Beispiel zeigt die ?nderungserkennung ohne Zone.js:

Lassen Sie uns jedes Szenario analysieren:

Szenario 1: Aktualisierung der Event-Handler-Eigenschaft

Funktioniert wie erwartet.

Szenario 2: Asynchrone Eigenschaftsaktualisierung

Erfordert this.changeDetectorRef.markForCheck(); oder die Verwendung von Signalen:

Korrigierte Version (mit markForCheck):

Korrigierte Version (mit Signalen):

Szenario 3: HTTP-Daten (Array)

Die Ansicht wird nicht automatisch aktualisiert:

Korrigierte Version (mit markForCheck):

Die Verwendung von async Pipe wird bevorzugt.

Szenario 4: HTTP-Daten (Async Pipe)

Einfach; Verwenden Sie die Pipe async:

Szenario 5: HTTP-Daten (Signal)

Verwenden Sie toSignal(), um Observablen in Signale umzuwandeln:

Zusammenfassung:

• Ereignishandler:Benutzeroberfl?che wird nahtlos aktualisiert.
• Asynchrone Operationen: Erfordert markForCheck() oder Signale.
• HTTP (Observable):Verwenden Sie die async-Pipe.
• Signale: Automatische UI-Updates bei Signal?nderungen.

Angular 19 Update (19. November 2025)

Angular 19 hat die zonenlose Anwendungsunterstützung weiter verfeinert, APIs verbessert, serverseitige Rendering-Unterstützung hinzugefügt und Tests verbessert. Die Angular-CLI unterstützt jetzt das Erstellen zonenloser Projekte:

providers: [
  provideExperimentalZonelessChangeDetection()
]

Das obige ist der detaillierte Inhalt vonZoneless in Angular nutzen: Eine neue ?ra der ?nderungserkennung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!