Angular 2-Eigenschaft Bindung Lebenszyklus

Was ist der definierte Lebenszyklus der Eigenschaft Bindung in Angular 2? Zum Beispiel habe ich folgende Element in meiner Vorlage:Angular 2-Eigenschaft Bindung Lebenszyklus

<input type="radio" name="{{choice.question_id}}" value="{{choice.id}}" 
        [checked]="isSelected()" 
        (change)="select()" 
        required>

Wann sind genau diese Eigenschaften und Event-Callbacks gebunden? Soweit ich weiß, gibt es einen Zyklus, der die Bindungen automatisch aktualisiert. Wo finde ich eine bessere Erklärung für diesen Zyklus?

Mein Ziel oben ist, Radiobutton ausgewählt standardmäßig wenn isSelected(). Somit ist das Abfragen des isSelected() nach dem anfänglichen Rendering redundant und ineffizient. Wie kann ich das [checked]="isSelected() nur auf den Moment beschränken, wenn Element zuerst zu DOM hinzugefügt wird?

Quelle

2016-06-05 Tuomas Toivonen

Die Bindungen werden bei jedem Änderungserkennungszyklus ausgewertet.

Die Änderungserkennung wird ausgeführt, nachdem eine asynchrone Ausführung stattgefunden hat. Angulars-Zonen patchen die meisten asynchronen APIs wie addEventHandler, removeEventHandler, setTimeout, ... Nachdem solche Ereignisse verarbeitet wurden, ändern sich die Winkelerkennung und überprüft alle Ausdrücke, die an Eingaben gebunden sind ([], {{}}).

Solche Ereignisse treten sehr häufig auf und somit werden gebundene Ausdrücke sehr häufig ausgewertet. Daher ist es wichtig, diese Ausdrücke effizient zu gestalten. Dies ist einer der Gründe, warum das Angular-Team von der Bindung an Funktionen abrät und stattdessen das Ergebnis einer Eigenschaft zuweist und stattdessen an diese Eigenschaft bindet, weil die Compairsion von Eigenschaften ziemlich effizient ist oder sogar besser an Observables und Versprechen gebunden ist (unter Verwendung der | async-Pipe)) die aktiv über Änderungen informieren.

Sie können nicht definieren, ab wann eine Bindung ausgewertet wird. Es wird jedes Mal ausgewertet, wenn die Änderungserkennung ausgeführt wird. Sie können jedoch steuern, ob die Änderungserkennung für Ihre Komponente oder ihre untergeordneten Komponenten ausgeführt wird, indem Sie ChangeDetectionStrategy.OnPush anstelle von ChangeDetectionStrategy.CheckAlways (Standardeinstellung) festlegen und die Änderungserkennung "manuell" aufrufen.

In devMode default, Änderungserkennung auch aways läuft zweimal, um zu überprüfen, ob die erste Änderungserkennung selbst keine Änderungen im Modell verursacht, die als Fehler angesehen wird. Dies muss berücksichtigt werden, wenn Sie sich fragen, warum eine gebundene Methode so häufig aufgerufen wird. Wenn in devMode teilen Sie die Anzahl von 2, um die effektive Anzahl zu erhalten, wie es in prodMode passieren würde.

Quelle

2016-06-05 09:38:48

Also wäre eine Option bind [checked] zum privaten Feld , die von ngOnInit() {checked = service.isChecked()} initialisiert wird, um die Serviceaufruflast zu reduzieren. Die Frage ist, ob ngOnInit jedes Mal aufgerufen wird, wenn eine Komponente durch strukturelle Anweisungen oder Routing zu DOM hinzugefügt wird. Logik in meiner Anwendung ist, dass der Dienst den Zustand "Form" beibehält und wenn der Benutzer weg und zurück zu einem bestimmten Teil des Formulars navigiert, fragt jede Eingabe ihren Status vom Dienst ab. Serviceaufruf wird nur benötigt, wenn einmal gerendert wird –

Ja 'ngOnInit()' wird jedes Mal aufgerufen, wenn die Komponente durch strukturelle Anweisungen oder Routing zum DOM hinzugefügt wird. Ich würde mir keine Sorgen über Aufrufe an den Dienst machen (zumindest wenn dies nicht zu einigen Serveranforderungen oder DOM-Aktualisierungen für jeden Anruf führt), die zu viel Prozessorleistung führen.Komponenten werden nicht zu oft hinzugefügt/entfernt und die Kosten für einen Aufruf eines Dienstes sind vernachlässigbar im Vergleich zu den Kosten, die beim Hinzufügen einer Komponente zum DOM entstehen. Ich würde diese vorzeitige Optimierung in Betracht ziehen. Wenn der Dienst bei jedem Aufruf teuer ist, versuchen Sie stattdessen, dies zu optimieren, indem Sie beispielsweise Ergebnisse zwischenspeichern. –

Siehe auch http://stackoverflow.com/questions/36271899/what-is-the-correct-way-to-share-the-result-of-an-angular-2-http-network-call-in –

Sie können diesen Artikel überprüfen Angular change detection Der Artikel beschreibt, wie Erkennung von Änderungen an Komponenten geändert werden (durch Ändern der Erkennungsstrategie oder alle Eingabe Requisiten zu Observablen ändern), aber nicht auf das DOM-Element selbst. Um ehrlich zu sein, weiß ich nicht, wie man ein einmaliges bindendes Äquivalent von angularjs erstellt. Es scheint mir, dass eine einmalige Bindung bei Angular 2 obsolet ist und sie konzentrieren sich auf die Optimierung von Hidrations- oder Digest-Zyklen auf Web-Komponenten-Ebene ....

Quelle

2016-06-05 09:48:02

Angular 2-Eigenschaft Bindung Lebenszyklus

Antwort

Verwandte Themen