Question

我有一个我创建的角度2组件，我在* ngFor指令中使用它，看起来每个实例都会调用两次构造函数。

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

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

代码结构如下：

外部组件

<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 组件，该组件被转换为托管它的扩展内联编辑组件（不知道）如果换算会影响构造函数被触发的次数吗？）

我的集合填充在最外层组件的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

我的问题似乎是由层次结构中的一个组件引起的，该组件引用了具有 @ViewChild 属性的“父”组件，并且在此代码中，正在进行调用以刷新我的收藏所以从DB中检索了2个假期，我的组件是按照* ngFor创建的，然后这个刷新调用再次带来两个假期并且* ng再次触发（我假设????）所以我的事件被连线了两次。

我摆脱了刷新的调用但是这仍然会发生在其他事件上，所以在我的组件的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中被称为重复

1 个答案: