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