Question

我正在关注angular tutorial。我可以在本教程上下文中理解其中的概念。
单击确认按钮后，将引发confirm()事件。

confirm() {
this.confirmed = true;
this.missionService.confirmMission(this.astronaut);
}

据我了解，使用missionService，astronaut被添加到主题中。因此，要检索它，下面的代码是显而易见的。

constructor(private missionService: MissionService) {
missionService.missionConfirmed$.subscribe(
  astronaut => {
    this.history.push(`${astronaut} confirmed the mission`);
  });
}

但是我无法理解为什么它已在父级构造函数中进行编码，并且每次引发事件时都会调用构造函数吗？

据我所知，构造函数仅在组件树构造中被调用。因此，我无法跟踪控制流程的顺序。让我知道我是否缺少任何东西。

Answer 1

在父级的构造函数中，它正在“订阅”服务（missionConfirmed$）的可观察（missionService）。 “预订”部分执行一次，但是每次调用新的missionConfirmed$.next(newAstronaut)时，都会执行将值传递给通过next()进行观察的值时执行的代码。

因此，每个next(newAstronaut)都会有一位新宇航员进来

  astronaut => { //<-- this will be the new astronaut
    this.history.push(`${astronaut} confirmed the mission`);
  }

Answer 2

否，不调用构造函数。就是它里面的观察者。

constructor(private missionService: MissionService) {
  missionService.missionConfirmed$.subscribe(
    // This will be called on each next()
    astronaut => {
      this.history.push(`${astronaut} confirmed the mission`);
    }
  );
}

Answer 3

为了理解此示例，您应该首先了解Observable的工作方式。

简而言之，可观察对象是观察者设计模式的实现，该模式具有两个参与者。主题和观察者。一个主题可以有多个观察者。为了成为观察者，应该订阅到主题。

在您的示例中， missionConfirmed $ 是主题，而观察者是代码：

astronaut => {
      this.history.push(`${astronaut} confirmed the mission`);
}

每次主题发出消息时，都会调用观察者。如您所说，构造函数在类构造期间仅被调用一次。但是，只要this.missionService.confirmMission(this.astronaut);发出消息，就会调用构造函数（观察者）中的部分

触发子组件事件时如何调用父组件构造函数

3 个答案: