Die Änderungserkennung ist ein grundlegender Aspekt von Angular. Sie ist für die Identifizierung und Aktualisierung von Teilen des DOM verantwortlich, die sich als Reaktion auf Datenänderungen oder Benutzerinteraktionen geändert haben. Dieser Prozess stellt sicher, dass die Benutzeroberfläche mit den zugrunde liegenden Daten konsistent bleibt und verbessert so das Benutzererlebnis und die Anwendungsleistung.

Die Rolle von Zone.js

In der Vergangenheit hat sich Angular für seinen Änderungserkennungsmechanismus auf Zone.js verlassen. Zone.js ist eine JavaScript-Bibliothek, die asynchrone Vorgänge abfängt und es Angular ermöglicht, Änderungen zu überwachen und entsprechende Aktualisierungen auszulösen. Allerdings kann die Einbeziehung von Zone.js den Overhead der Anwendung erhöhen, insbesondere in Szenarien mit häufigen asynchronen Aktivitäten.

Strategien zur Änderungserkennung

Angular bietet zwei primäre Strategien zur Änderungserkennung:

• Standard: Die Änderungserkennung wird nach jedem Lebenszyklus-Hook ausgelöst, z. B. ngOnInit oder ngAfterViewInit. Diese Strategie ist unkompliziert, kann jedoch insbesondere bei großen Anwendungen zu unnötigen DOM-Updates führen.

@Component({
  selector: 'app-my-component',
  template: `
    
{{ message }}
  `
})
export class MyComponent {
  message = 'Hello, world!';
}

Diese Strategie ist einfacher zu implementieren, da Angular den Großteil der Änderungserkennungslogik automatisch verarbeitet.
Die größte Herausforderung bei dieser Änderungserkennungsstrategie bestand darin, dass sie zu unnötigen DOM-Updates führte, was für große Anwendungen von entscheidender Bedeutung ist.

• OnPush: Die Änderungserkennung wird nur ausgelöst, wenn sich Eingabeeigenschaften oder asynchrone Observablen ändern. Diese Strategie ist bei komplexen Komponenten mit häufigen Datenaktualisierungen leistungsfähiger, erfordert jedoch mehr manuelle Verwaltung.

@Component({
  selector: 'app-my-component',
  template: `
    
{{ message }}
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  message = 'Hello, world!';
} 

Während die onPush-Änderungserkennungsstrategie unnötige DOM-Manipulationen minimierte, bestand die größte Herausforderung bei der onPush-Änderungsstrategie darin, dass die Entwickler mehr manuelle Verwaltung durchführen und Änderungen manuell auslösen mussten. In bestimmten Szenarien mussten sie die Änderungserkennung explizit mit changeDetectorRef.detectChanges() handhaben, beispielsweise wenn sich Daten indirekt ändern oder wenn veränderliche Objekte verwendet werden.

Winkel-18- und Hybrid-Änderungserkennung: Ein zonenloser Ansatz

Um die mit Zone.js verbundenen Herausforderungen zu bewältigen, hat Angular 18 eine experimentelle Funktion namens Hybrid Change Detection eingeführt. Dieser Ansatz zielt darauf ab, Zone.js vollständig zu eliminieren und einen neuen Änderungserkennungsmechanismus zu verwenden, um Änderungen zu erkennen und das DOM zu manipulieren.

Aktivieren der hybriden Änderungserkennung:

Um die hybride Änderungserkennung zu aktivieren, können Sie den folgenden Code verwenden:

bootstrapApplication(RootCmp,
{ providers: [provideExperimentalZonelessChangeDetection()] 
}
);

Dies löst in den folgenden Szenarien eine Änderungserkennung aus:

• Ein Signal wird aktualisiert.
• changeDetectorRef.markForCheck() wird aufgerufen.
• Ein mit der AsyncPipe abonniertes Observable erhält einen neuen Wert.
• Eine Komponente wird angehängt oder getrennt.
• Ein Eingang ist gesetzt.

Sobald die Hybrid-Änderungserkennung aktiviert ist, können Sie Zone.js sicher aus den Polyfills Ihrer Anwendung entfernen.

 "polyfills": [
              "zone.js" //remove this line
            ],

Vorteile der hybriden Änderungserkennung

• Verbesserte Leistung: Durch die Eliminierung von Zone.js wird der Overhead reduziert, was zu einer besseren Leistung führt, insbesondere bei Anwendungen mit zahlreichen asynchronen Vorgängen.

• Verbesserte Entwicklererfahrung: Der Wegfall der manuellen Änderungserkennung vereinfacht die Entwicklung und verringert die Fehlerwahrscheinlichkeit.

• Kleinere Anwendungsgröße: Zone.js erhöht die Anwendungsgröße normalerweise um etwa 13 KB. Das Entfernen kann zu einem kleineren Paket führen.