Angular nimmt uns viele Dinge ab, z.B. uns um die Aktualisierung der Oberfläche zu kümmern. Dabei verrichtet die Bibliothek Höchstleistungen. Und wir können ihr den Job leichter machen.
Die Grundidee ist einfach. Bei einer ganzen Reihe von Ereignissen prüft Angular in allen aktiven Komponenten, von oben nach unten, ob sich eine Expression geändert hat, indem er sie einfach noch einmal auswertet und den alten mit dem neuen Wert vergleicht. Sollte dies der Fall sein, führt er eine Aktualisierung der Oberfläche durch. Das kann bei großen Anwendungen zu spürbaren Performanceeinbußen führen. Diese sogenannte Change Detection Strategy lässt sich auf Komponenten-Ebene ändern.
@Component({
...
changeDetection: ChangeDetectionStrategy.OnPush,
...
})
Diese Komponente und alle ihre Kind-Elemente werden nun nur noch eingeschränkt automatisch durch ihren Parent aktualisiert. Das schafft Performance, benötigt aber einen genaueren Blick wann / wie sich Daten ändern und ob eine manuelle Aktualisierung nötig ist. Im Folgenden die Ereignisse, die zu einer Aktualisierung der Oberfläche führen und was dabei zu beachten ist:
- @Input
- OnPush: nur bei Änderung der Referenz
- Default: ja
- @Output
- OnPush: ja
- Default: ja
- async pipe
- OnPush: ja
- Default: ja
- setTimeout
- OnPush: nein
- Default: ja
- Promise.then / Obersvable.subscribe
- OnPush: nein
- Default: ja
- signals
- OnPush: nur bei Änderung der Referenz oder angepasster „equal“ Option im Signal
- Default: ja
Bei der Verwendung der OnPush Strategie sollten wir also:
- async pipe präferieren (gegenüber manueller Subscription)
- immutable Input Objekte verwenden oder auf die neuen signals inputs (immutable) / signal models setzen
…dann klappt’s auf mit dem OnPush
Live. Farbe. Gihub
