Angular 2兄弟组件2方式绑定(bind)

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

在模板中，selectedQuestion 使用 [(ngModel)] -> 2 方式数据绑定(bind)进行绑定(bind)，因此我可以通过简单地将 selectedQuestion 发送到服务来更新问题。

当我在问题详细信息 View 中更改某些内容时，我很难理解 Angular2 为什么以及如何更新列表？我想因为我创建了名为 selectedQuestion 的单独变量，左侧的列表不应该是更新直到我推送更改以使用该服务？我对使用 ngModel 的理解是它应该以两种方式绑定(bind)到 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);
      });
  }

有多种选择。其中一些显示在上面