Question

我正在向用户同时显示2个兄弟组件。其中一个是QuestionList，它从服务和显示问题列表中获取一系列问题。点击特定问题后，它会显示（在列表旁边）问题详细信息，如下面

所示

问题详细信息组件使用路由器从URL获取问题ID并将其存储在名为selectedQuestion的单独变量中，如下所示：

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

在模板中，使用[（ngModel）] - ＆gt;绑定问题。 2路数据绑定所以我可以通过简单地将selectedQuestion发送到服务来更新问题。

当我在问题详细信息视图中更改某些内容时，我很难理解为什么以及Angular2如何更新列表？我认为因为我创建了名为selectedQuestion的单独变量，左边的列表不应该是更新，直到我推动更改使用该服务？我对使用ngModel的理解是它应该2路绑定到selectedQuestion，绝对不会更新我的服务

Answer 1

看起来您在两个组件之间共享相同的问题实例，在更改检测期间，两个组件都检测到更改并且它们都会更新。

Answer 2

您正在引用所选问题的相同实例，您需要修改如下

如果您没有使用

进行安装，请导入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);
      });
  }

有几种替代方案。其中很少一部分如上所示

Angular 2兄弟组件双向绑定

2 个答案: