Angular 2 Geschwisterkomponenten 2-Wege-Bindung

Question

Ich habe 2 Geschwisterkomponenten zur gleichen Zeit für den Benutzer angezeigt. Einer von ihnen ist eine QuestionList, die eine Reihe von Fragen aus dem Service und eine Liste von Fragen anzeigt. Sobald Sie sich auf eine bestimmte Frage klicken zeigt es (neben der Liste) Frage Details unten

Frage Detail Komponente gesehen mag verwendet Router Frage-ID aus der URL zu nehmen und speichert sie in einer separaten Variable namens selectedQuestion wie folgt aus:

selectedQuestion: Question; 
ngOnInit() { 
    this.subscription = this.route.params.subscribe(
     (params: any) => { 
     this.questionIndex = params['questionId']; 
     this.selectedQuestion = this.qs.getQuestion(this.questionIndex); 
     } 
    ); 
    } 

In der Vorlage selectedQuestion wird mit binded [(ngModel)] -> 2-Wege-Datenbindung, so kann ich einfach durch das Senden selectedQuestion an den Dienst, die Frage aktualisieren.

Ich habe Schwierigkeiten zu verstehen, warum und wie Angular2 die Liste aktualisiert, wenn ich etwas in der Frage Detailansicht ändere? Ich dachte, Ursache habe ich separate Variable namens selectedQuestion erstellt, Liste auf der linken Seite sollte nicht aktualisiert werden, bis ich Änderungen an die Verwendung des Dienstes drücken? Mein Verständnis der Verwendung von ngModel ist, dass es 2-Wege-Bindung nur an selectedQuestion und definitiv nicht zu aktualisieren mein Service

Answer 1

Sie sich beziehen auf gleiche Instanzen der ausgewählten Frage, und Sie müssen wie unten

Import der lodash ändern, wenn Sie nicht mit installieren

npm install --save lodash 

import * as _ from "lodash"; 


selectedQuestion: Question; 
ngOnInit() { 
    this.subscription = this.route.params.subscribe(
     (params: any) => { 
     this.questionIndex = params['questionId']; 
     this.selectedQuestion = _.clone(this.qs.getQuestion(this.questionIndex)); 
     } 
    ); 
    } 

Alternativ

selectedQuestion: Question; 
ngOnInit() { 
    this.subscription = this.route.params.subscribe(
     (params: any) => { 
     this.questionIndex = params['questionId']; 
     let jsonQuestionasString JSON.stringify(this.qs.getQuestion(this.questionIndex); 
     this.selectedQuestion = JSON.parse(jsonQuestionasString); 
     }); 
    } 

Es gibt mehrere Alternativen dazu. Einige davon ist oben gezeigt

Answer 2

Es sieht aus wie Sie die gleiche Instanz der Frage zwischen zwei Komponenten teilen, während Änderungserkennung erkennen beide Komponenten Änderungen und sie beide werde aktualisiert.