由于 @ViewChild，构造函数在 *ngFor 中被重复调用

Question

我创建了一个 angular 2 组件，我在 *ngFor 指令中使用它，似乎每个实例都调用了两次构造函数。

因此，如果我有 2 条记录返回到我的集合中，我的组件的构造函数将输入 4 次。如果我有三个构造函数被解雇了 6 次。

这给我带来了问题，因为我在构造函数中订阅了 RxJs observables，因此我的事件被重复执行，所以在处理删除事件时，代码试图多次删除相同的记录，所以在第一次之后失败（成功）调用。

代码结构如下：

最外面的组件

<div class="list-row-container" *ngFor="let holiday of holidays">
  <div style="border:1px; border-style: solid; margin: 5px;">
  <div style="margin: 5px;">
  <extended-inline-edit actionClass="fa-calendar" 
  [entityId]="holiday.id">
        <holiday-view-body view-body [holiday]="holiday"></holiday-view-
  body>
        <holiday-edit-body edit-body [holiday]="holiday" [venueId]="venueId" 
  [year]="year"></holiday-edit-body>
      </extended-inline-edit>
    </div>
  </div>
</div>

我受影响的组件是 holiday-edit-body 组件，它被嵌入到我的 extended-inline-edit托管它的组件（不知道嵌入是否会影响构造函数被触发的次数？）

我的集合填充在最外层组件的 ngOnInit 中，holidays.ts 如下：

  ngOnInit() {

    this.holidayService.getVenueHolidayInheritanceIndicator(this.venueId).then((data) => {
      this.inheritFromAccount = data.sameAsAccount;
      if (this.inheritFromAccount === false) {
        this.loadVenueHolidays();
      } else {
        this.loadAccountHolidays();
      }
    });
  }

  loadVenueHolidays() {
    this.holidayService.getVenueHolidays(this.venueId, this.year).then((data) => {
      this.holidays = data;
    });
  }

Answer 1

我的问题似乎是由层次结构更上层的一个组件引起的，该组件引用了我的 "Parent" 具有 @ViewChild 属性的组件，在此代码中，正在调用以刷新我的集合，因此从数据库中检索了 2 个假期，并且根据 *ngFor 创建了我的组件，然后此刷新调用再次带来了两个假期并且 *ngFor 再次触发（我假设？？？？ ) 所以我的事件被连接了两次。

我摆脱了刷新的调用，但是这仍然会发生在其他事件上，因此在我的组件的 ngOnDestroy 方法中取消订阅，如下所示，以确保没有错误的订阅！（仍然从构造函数设置订阅）

  ngOnDestroy() {
    this.clearDownSubscriptions();
  }

  clearDownSubscriptions(){
    this.deleteHolidaySubscription.unsubscribe();
    this.asideCloseSubscription.unsubscribe();
    this.scheduleSavedSubcription.unsubscribe();
    this.saveHolidaySubscription.unsubscribe();
    this.editToggledSubscription.unsubscribe();
    this.performActionSubscription.unsubscribe();
  }

由于 @ViewChild，构造函数在 *ngFor 中被重复调用

constructor being called duplicate in *ngFor due to @ViewChild

transclusion

ngfor

angular