Angular2, halten Modelle synchronisieren zwischen Komponenten

Question

Ich überlege, von meinem vertrauenswürdigen Rückgrat zu Angular2 zu bewegen (oder sollte ich sagen, mein Chef möchte mit einem neuen Spielzeug spielen, was für mich in Ordnung ist), suchte ich viel online und habe einige Tests gemacht, aber ich kann die Antwort auf diese einfache Frage nicht finden:

Kann ich zwei Modelle synchron zwischen zwei Komponenten halten? Beispiel: Ich habe eine Liste von Benutzern in der Seitenleiste, die eine Komponente ist, und ein Formular, um diese Benutzer in meiner "Hauptseite" zu bearbeiten, die eine andere Komponente ist.

Die Sidebar ist dafür verantwortlich, dass ihre Sammlung angezeigt wird, und das Formular ist für das Abrufen des Modells verantwortlich. Wenn das Modell aktualisiert wird, möchte ich, dass die Änderungen in der Seitenleiste widergespiegelt werden, ohne den Server erneut zu durchlaufen.

Ich weiß, SpinJS tut dies und ich habe etwas im Backbone mit Ereignissen, um das gleiche zu erreichen (basierend auf Modellklasse und ID) gehackt, aber ich frage mich, ob Angular2 eine native Art der Handhabung hat? Wenn nicht, wie würde man diese Art von Verhalten implementieren?

Danke.

EDIT:

Ich habe meine Testdateien in diesem Plunker: http://plnkr.co/edit/jIdnu68ZDMDSFJkomN3Y

Zuerst wählen Sie einen Helden, und klicken Sie auf "Details anzeigen", wird dies eine http.get Anfrage an den In-Memory-Server machen hol den Helden.

Zweitens, klicken Sie auf "Give Sword", das wird eine Waffe zum ausgewählten Benutzer hinzufügen. Zu Testzwecken, anstatt den bereits geladenen Benutzer zu verwenden, fordere ich denselben unter Verwendung http.get wieder an.

Wenn ich den Namen im Textfeld ändere, wird der Name der zweiten Instanz nicht aktualisiert.

Sie müssen sich vorstellen, dass ich die aktuelle Instanz des Helden aus welchen Gründen auch immer nicht verwenden kann, ich möchte es erneut vom Server anfordern.

Answer 1

Ich denke, dass der beste Weg, um dies zu tun ist, EventEmitter in einem gemeinsamen Dienst zu nutzen. Wenn eine Änderung durchgeführt wird, wird ein Ereignis am Ereignisemitter gesendet. Andere Teile der Anmeldung, die sich dagegen registriert haben, werden benachrichtigt.

Siehe diese Antwort:

• Delegation: EventEmitter or Observable in Angular2

Answer 2

Sie einen Dienst zwischen Komponenten gemeinsam nutzen können.

@Injectable() 
export class SharedService { 
    someField:string; 
} 

@Component({selector: 'parent-cmp', providers [SharedService], ...) 
export class ParentCmp { 
    constructor(private model:SharedServicee) { 
    } 
} 

@Component({selector: 'child-cmp', 
    // don't add it to providers here so it gets the same instance 
    // the parent got 
    /*providers [SharedService] */, ...) 
export class ChildCmp { 
    constructor(private model:SharedServicee) { 
    } 
} 

Wenn eine Komponente ein Feld in dem Dienst ändert, sind der andere Service, der sie auch in der anderen Komponente sichtbar.

Sie können Observable oder EventEmitter verwenden, um interessierte Parteien über Änderungen oder andere Ereignisse zu informieren.

Answer 3

Sie können gemeinsam genutzte Dienste verwenden, um dasselbe Ereignis in verschiedenen Komponenten zu abonnieren. (Wenn Sie diesen Dienst beim Bootstrap bereitstellen, erhalten Sie in allen Komponenten dasselbe Objekt. Sehr wichtig!).

Wenn Sie http.get anrufen möchten nur einmal, und dann wiederholen nur diesen Anruf, sollten Sie verwenden:

private _subject = new ReplaySubject(1); 
constructor(public http: Http) { 
    this.http 
     .get("...").subscribe(this._subject); 
} 

Voll, Arbeitsbeispiel: https://plnkr.co/edit/G1mSXfpuYaIGXNwK5WKy?p=preview

Werfen Sie einen Blick auf Netzwerk Panel (Chrom), Ajax-Aufruf wird nur einmal ausgelöst.