Wie wird der Zustand in Winkel 2 gehalten?

Question

Ich bekomme gerade meinen Kopf um Winkel 2 und schaue auf die Gestaltung eines Assistenten Art der Anwendung. Komponenten auf Seite 1 müssen Daten an Komponenten auf anderen Seiten übermitteln. Denken Sie daran, einen Service zu verwenden, um Status/Daten beizubehalten, die in der nächsten Ansicht/Komponente des Assistenten eingegeben werden. Das Ganze sollte locker gekoppelt sein. Ich denke nicht, dass es nützlich ist, ein beobachtbares Muster zu entwerfen, weil eine Komponente, die sich auf einer der nächsten Seiten/Ansichten befindet, noch nicht sichtbar ist. Welche neuen Funktionen in eckigen 2 könnten dazu verwendet werden, dies zu lösen?

Answer 1

prüfen @ngrx/store

RxJS angetrieben Zustandsverwaltung von Redux für Angular2 inspiriert apps

Answer 2

Ich schlage vor, Ihren Zustand zentralisiert mit z. B. Redux. Sie verwenden dann @Input() und @Output() von angular, um Ihren Status an Komponenten weiterzugeben und Statusänderungen von Ihren Komponenten zu verteilen.

Sie hätten eine Komponente auf oberster Ebene, die Änderungen am Status abonniert und diese unter Verwendung der untergeordneten Komponente @Inputs propagiert. Ihre untergeordneten Komponenten senden Anforderungen von Statusänderungen mithilfe von @Outputs() an die Komponente auf oberster Ebene, die wiederum den zentralen Status aktualisiert.

Auf diese Weise muss Ihre individuelle Komponente nichts darüber wissen, wie der Status gespeichert und aktualisiert wird, sie stellen lediglich Funktionalität bereit und akzeptieren Eingabeparameter, die die gewünschte Wirkung auf ihre Funktionalität haben können.

Wenn Sie viele tief geschachtelte Komponenten haben, verwenden sie selbst auch @Input() und @Output(), um die Funktionalität bereitzustellen, und kommunizieren nicht direkt mit einem Statusspeicher.

Ich benutze selbst diese Methode und es hält jede Komponente sehr schlank und wiederverwendbar, während es sehr einfach macht, den Überblick über Ihren Zustand zu behalten, und reduziert die Komplexität der Synchronisierung Ihres Zustands über Komponenten hinweg.

Sie sollten sich zusätzlich ChangeDetectionStrategy und ChangeDetectorRef ansehen, da Sie mit dieser Methode die Erkennung von Komponentenänderungen vereinfachen können. Alle Ihre untergeordneten Komponenten können im Allgemeinen die so genannte OnPush-Prüfstrategie verwenden, was bedeutet, dass ihre Änderungserkennung nur ausgeführt wird, wenn sich ihre @Input() - Eigenschaften geändert haben. Da dies die einzige Möglichkeit ist, den Zustand in diesem Fall zu ändern, können Sie angular nicht die Überprüfung auf Änderungen anders bestimmen. Dies wird auch mit der Leistung helfen.

Beachten Sie, dass Sie den Status nur mit einem regulären angular2-Dienst beibehalten können, aber etwas wie Redux gibt Ihnen einige Dinge kostenlos, wie zum Beispiel die bereitgestellten Dev-Tools. Wenn Sie mit Redux arbeiten, sollten Sie sich auch Immutable.js ansehen, da es wichtig ist, den Status nicht direkt mit Redux zu ändern.