Architektonischer Fluss von Angular 2 App

Question

Ich arbeite an einer Angular2-Anwendung. Meine App wird entweder verwendet, um einen neuen Post zu erstellen oder einen bereits erstellten Post zu bearbeiten. Es hat zwei Seiten.

Erste Seite, ist nur eine normale Form mit allen grundlegenden Info und zweite Seite hat mehrere Komponenten, die miteinander sprechen werden, d. H. Jede Komponente ist in gewisser Weise miteinander verknüpft und müssen miteinander reden. Und diese Komponenten sind abhängig vom Typ dynamisch.

Meine Frage ist: Wie soll ich den Fluss der Anwendung so gestalten, dass es sowohl für das Erstellen als auch für das Bearbeiten von Szenarien passt.

The Way I von jetzt ist, hat

Jede Komponente einen Dienst denke (sie injizierbare machen), die die Daten enthalten wird, und ich habe Beobachter diese Dienste für alle und zu denen in anderen Komponenten abonnieren erstellen so werden sie abhängig von Änderungen im Service handeln.

andere Weg ist:

ich einen gemeinsamen Emitter-Dienst erstellt, welche Objekte emittieren zurückkehren wird, kann ich diese Komponente aufrufen und ein Ereignis emittieren, die anderen Komponenten zu hören.

Welcher Weg wäre ein guter Weg, mit solchen Szenarien umzugehen und auf lange Sicht zu helfen? Soll ich auch irgendwie helfen, damit ich später noch ein paar weitere Komponenten nahtlos hinzufügen kann?

Dank

Answer 1

halte ich würde das ‚Modell‘ Objekte, die Sie in der ngOnInit Verfahren der zweiten Seite und geben sie als Eingabe für die Komponenten, die sie benötigen, erstellen müssen.

Dies erfordert, dass die Komponenten @Input() - Eigenschaften definieren, um solche 'Modell'-Objekte zu erhalten.

Ich hoffe, die

IN REAKTION AUF DEN KOMMENTAR VON ANUTEJA

hilft ich die folgende Strategie in Betracht ziehen würde:

1) Child1 eine Ausgang Eigenschaft definiert (sie @Output() resultOutput sagen), durch die es signalisiert die Tatsache, dass neue Ergebnisse aus dem Backend-Aufruf abgerufen wurden, dso etwas wie this.resultOutput.emit(resultOfBackendCall) (unter der Annahme, dass resultOfBackendCall eine Variable in dem Verfahren der Child1 definiert ist, der die Daten abruft)

2) Parent Komponente abonniert die resultOutput Eigenschaft Child1 und deshalb weiß, wann ein neues Ergebnis geholt wird, über etwas wie <child1 (resultOutput)="newResult($event)"></child1>

3) die newResult(event) Methode der Parent speichert das Ergebnis von Child1 in eine Eigenschaft von Parent empfangen (wir die Variable resultReceived nennen), so etwas wie

newResult(resultFromBackEnd) { 
    this.resultReceived = resultFromBackEnd; 
} 

4) Child2 eine Eingangs Eigenschaft definiert (wir @Input() myList sagen), wo er von Parent die Liste zu empfangen erwartet, dass

muss

5 angezeigt) Parent Feeds Child2 die Eigenschaft mit resultReceived über so etwas wie <child2 [myList]="resultReceived"></child2>

Wenn alles funktioniert, sobald Parent Benachrichtigung von Child1 eines neuen Ergebnisses vom Back-End-Aufruf erhält Child2 Feeds und das Ergebnis sollte angezeigt werden.

Dies bedeutet im Wesentlichen, dass Parent alle Benachrichtigungen zentralisiert und Daten an die untergeordneten Elemente gemäß den Anwendungsregeln sendet. Auf diese Weise erhalten Sie meiner Meinung nach ein klares Design mit Parent orchestrieren, was in diesem bestimmten Stück der Anwendung geschieht.

Ich hoffe, das ist klar genug und das hilft