9.3.2021 |

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.
Zur Übersicht
Rahmi Tufanoglu

Mehr vom Devsquad...

Jan Sauer

Java15

Lucas Meurer

Template String Quiz

Hallo

Wir sind für Sie da und freuen uns auf Ihre Fragen oder Ihr Feedback.

* Pflichtfeld