Угловые 2 родственных компонентов 2-сторонняя привязка

Question

У меня одновременно есть 2 компонента для брака, отображаемых пользователю. Один из них - это QuestionList, который принимает множество вопросов из списка сервисов и отображения вопросов. После того, как вы нажмете на конкретный вопрос он отображает (рядом со списком) подробно вопрос, как показано ниже компоненты подробно

Вопрос использует маршрутизатор взять вопрос идентификатор из URL и сохраняет его в отдельной переменной называется selectedQuestion так:

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

в шаблоне selectedQuestion является переплетены с использованием [(ngModel)] -> 2 способ привязки данных, так что я могу обновить этот вопрос, просто отправив selectedQuestion на службу.

Я пытаюсь понять, почему и как Angular2 обновляет список, когда я что-то меняю в вопросе о подробном вопросе? Я думал, что я создал отдельную переменную с именем selectedQuestion, список слева не должен обновляться, пока я не нажму изменения на использование сервиса? Мое понимание использования ngModel заключается в том, что он должен 2 образом привязываться к selectedQuestion только и определенно не обновлять мою службу

Answer 1

Вы имеете в виду те же экземпляры выбранного вопроса и вам нужно изменить, как показано ниже

Импортируйте lodash, если вы не имеете установки с помощью

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)); 
     } 
    ); 
    } 

В качестве альтернативы,

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); 
     }); 
    } 

Существует несколько альтернатив. некоторые из которых показаны выше

Answer 2

Похоже, что вы используете один и тот же экземпляр вопроса между двумя компонентами, во время обнаружения изменений оба компонента обнаруживают изменения, и оба они получить обновление.