Angular - Funktionsaufrufe in Templates vermeiden

  • Standardmäßig führt Angular jedes Mal, wenn sich etwas in der Anwendung ändert, eine ChangeDetection für alle Komponenten durch, d.h. es wird geprüft, ob sich der Wert von Template-Ausdrücken geändert hat.
  • Wenn die Komplexität der Komponente wächst, dauert die Prüfung länger, aber durch ChangeDetectionStrategy.OnPush sagen wir Angular, dass es nur prüfen soll, ob sich die Referenzen geändert haben, anstatt nach den Werten jeder Eigenschaft zu suchen.
  • OnPush-ChangeDetectionStrategy hilft, die Anzahl der Änderungszyklen zu reduzieren.

Beispiel: https://gist.github.com/RahmiTufanoglu/917a1f1c015e2602ecda028ae723d0a4

  • Um festzustellen, ob formatName() neu gerendert werden muss, muss Angular die formatName()-Funktion ausgeführt haben, um zu prüfen, ob sich der Rückgabewert geändert hat.
  • Da Angular nicht vorhersagen kann, ob sich der Rückgabewert von formatName() geändert hat, muss es die Funktion bei jeder Änderungserkennung ausführen.
  • Wenn also die Änderungserkennung 100 Mal läuft, wird die Funktion auch 100 Mal aufgerufen, auch wenn sich ihr Rückgabewert nie ändert.
  • Problematisch wird es bei großen Komponenten. Template-Rendering nimmt Zeit in Anspruch und die Leistung wird beeinträchtigt.

Wir freuen uns Sie kennen zu lernen

Hat Sie unser Angebot überzeugt? Dann freuen wir uns, Sie kennen zu lernen. Kontaktieren Sie uns gerne für ein unverbindliches Erstgespräch.

newcubator GmbH
Freie-Vogel-Straße 369
44269 Dortmund
dortmund@newcubator.com
+49 231/586 873 80
newcubator GmbH
Bödekerstraße 22
30161 Hannover
hannover@newcubator.com
+49 511/957 313 00