Aktuelle Situation:
Ich habe eine parent
und eine child
Komponente.
Das parent
initialisiert die Daten von child
mit @Input
. Und das child
benachrichtigt das übergeordnete Element, wenn der Benutzer die Daten mit @Output
bearbeitet hat. Da die Daten unveränderlich sind , muss child
die Daten zusammen mit dieser Benachrichtigung senden.
Wenn parent
benachrichtigt wurde, prüft es, ob die übermittelten Daten gültig sind, und setzt es dann (das wird den neuen Wert auch an andere untergeordnete Komponenten weitergeben).
Das Problem:
Wenn Sie die neuen Daten in parent
setzen, wird sie natürlich auch an die Komponente child
übergeben, die gerade die Daten gesendet hat. Dies wird child
ngOnChanges
auslösen, was dann ein Repaint der Benutzeroberfläche auslöst.
Hintergrund:
Der parent
hat mehrere verschiedene child
-Komponenten, die alle auf die gleichen myItem
-Daten angewiesen sind und diese Daten bearbeiten können und dann parent
auf Änderungen benachrichtigen.
Hier ist eine vereinfachte Version des Codes, die das Problem zeigen sollte.
Übergeordnete Komponente:
%Vor%Untergeordnete Komponente:
%Vor% Wie Sie sehen können, übernimmt die child
-Komponente die Daten von @Input
und macht sie veränderbar. Und bevor es wieder an parent
gesendet wird, wird es wieder unveränderlich gemacht.
Gibt es ein Muster, um diese kreisförmigen Ereignisse zu verhindern?
Ich kann mir keine Möglichkeit vorstellen, den Kreis zu verlassen, wenn wir bei der bidirektionalen Ereignisauslösung bleiben. Vor allem mit mehreren Kindern.
Eine Möglichkeit, an die ich denken kann, ist, dass sowohl Eltern als auch Kinder einen Share-Datendienst verwenden. Die Daten werden ein für allemal geändert, da alle Parteien die gleichen Daten verwenden.
globaldata.service.ts
%Vor%app.module.ts (Angenommen, dies ist Ihr Root-Modul)
%Vor%parent.component.ts (unter der Annahme, dass es sich nicht um root handelt, mehrere Instanzen, Teil von app.module)
%Vor%child.component.ts
%Vor%Verwenden Sie das Subskriptions-Abonnement von RxJs wie eine Broadcast-Warteschlange. Ich habe tatsächlich ein Paket mit einem Beispiel erstellt:
Die Idee:
Parent (unter der Annahme, dass es sich nicht um root handelt, mehrere Instanzen, Teil von app.module)
%Vor%Kind
%Vor% Ich habe jetzt eine funktionierende (aber sehr
child
speichert den zuletzt ausgegebenen Wert in modelChange
Wenn ngOnChanges
aufgerufen wird, können wir die Referenzen dieser Objekte vergleichen
Wenn Referenzen gleich sind, dann hat diese spezielle Komponente child
den Wert
Beispiel für einen vereinfachten Code:
%Vor%Es funktioniert wie erwartet, aber ich frage mich immer noch, ob es einen schöneren Weg gibt, weniger Code zu verwenden.
Vielleicht ist es möglich, dies mit Observable
s für @Input() input
?
Tags und Links angular immutability event-handling angular2-template