Angular 2: Bindung an Funktionen aus Komponentenvorlagen

8

In Angular 1 haben wir es vermieden, Funktionen innerhalb von Vorlagenausdrücken im Übermaß aufzurufen, z. ng-repeat="item in vm.getFilteredItems()" , da Eigenschaftsänderungen, die nichts mit dem Ergebnis von getFilteredItems zu tun haben, dazu führen würden, dass die Funktion wiederholt und unnötigerweise bei Digests neu berechnet wird, was häufig Leistungsprobleme im Maßstab verursacht. Stattdessen binden wir an Objekte und berechnen basierend auf Ereignissen (z. B. ng-repeat="item in vm.filteredItems ).

In Angular 2 wurde der Dirty-Checking-Prozess optimiert, aber in Component Templates aufgerufene Funktionen werden immer noch aufgerufen, wenn sich Eigenschaften auf Komponentenebene ändern, unabhängig davon, ob die Funktion von diesen Eigenschaften abhängt. Ich vermute, dass dies zu den gleichen Leistungsproblemen führen könnte, wenn sie unsachgemäß verwendet werden.

Hier ist ein vereinfachtes Beispiel für die unterschiedlichen Ansätze in Angular 2:

%Vor%

-

%Vor%

Zypern

Ist das in Angular 2 noch ein Problem? Welcher Ansatz wird bevorzugt und warum? Danke!

    
Skyler 07.06.2016, 19:23
quelle

1 Antwort

5

Sie könnten eine Pipe erstellen. Pipes (wenn pure ) werden nur aufgerufen, wenn sich abhängige Werte ändern.

%Vor%

Wenn die Rohrleitung Änderungen in names erkennen muss, muss pure deaktiviert werden.

Wenn names durch eine andere Instanz ersetzt wird, anstatt nur Mitglieder hinzuzufügen oder zu entfernen, dann funktioniert pure gut und die Pipe wird nur ausgeführt, wenn names oder searchTerm sich ändert.

Tipp

In devMode (Standard) wird die Änderungserkennung zweimal ausgeführt, und die Pipe wird doppelt so oft wie erwartet aufgerufen.

    
Günter Zöchbauer 07.06.2016, 20:20
quelle

Tags und Links