由于@ViewChild，构造函数在 *ngFor 中被称为重复答案

【问题标题】：constructor being called duplicate in *ngFor due to @ViewChild由于@ViewChild，构造函数在 *ngFor 中被称为重复
【发布时间】：2018-04-01 10:43:51
【问题描述】：

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

所以如果我有 2 条记录返回到我的集合中，我的组件的构造函数会输入 4 次。如果我有三个构造函数被触发 6 次。

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

代码结构如下：

最外层组件

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

【问题讨论】：

您是否尝试将订阅可观察对象移动到ngOnInit？
请添加如何初始化/更新holidays的代码。
感谢 zgue，我离开了 ngInit，因为我认为这可能是我的问题，所以在那里发生了。
this.holidays（或data）是什么类型？
所以我返回了几步，发现更高的另一个组件通过@ViewChild 属性引用了我的holiday.ts，并触发了导致集合的loadVenueHolidays() 方法刷新（使用相同的数据）从而更新组件两次？我现在的问题是，如何取消订阅我的数据刷新的 RxJs 事件处理程序？

标签： angular ngfor transclusion

【解决方案1】：

我的问题似乎是由层次结构更上层的组件引起的，该组件引用了具有 @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();
  }

【讨论】：