Angular 2 个兄弟组件 2 种方式绑定

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 方式数据绑定进行绑定，因此我可以通过简单地将 selectedQuestion 发送到服务来更新问题。

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

Angular 2 sibling components 2 way binding

angular

angular2-template

angular2-services