Zoneless in Angular nutzen: Eine neue Ära der Änderungserkennung

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:

<code class="language-typescript">providers: [
  provideExperimentalZonelessChangeDetection()
]</code>

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:

<code class="language-json">"polyfills": []</code>

3. Zone.js deinstallieren:

<code class="language-bash">npm uninstall zone.js</code>

Ä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:

<code class="language-typescript">providers: [
  provideExperimentalZonelessChangeDetection()
]</code>

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!