@ViewChildのために* ngForでコンストラクタが重複して呼び出される

Question

私が作成した角度2のコンポーネントがあります。これは* ngForディレクティブで使用しており、コンストラクタがインスタンスごとに2回呼び出されているようです。

したがって、2つのレコードがコレクションに返された場合、コンポーネントのコンストラクタは4回入力されます。私が3つ持っていれば、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> 

影響を受けている私のコンポーネントが私の拡張にトランスクルードされている休日編集-体コンポーネント、次のとおりです。

コードの構造はようにあります-inline-editコンポーネントをホストしています（コントラクターが起動された回数にトランジションが影響するかどうかはわかりません）

以下のように私のコレクションは、最も外側のコンポーネント、holidays.tsのngOnInitに移入されています。私の問題は私の「親」への参照を持つ階層までの別の成分によって引き起こされているようだ

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属性で、このコードでは、コレクションを更新して2つの休日をDBから取得し、* ngForごとにコンポーネントを作成するようにコールが行われていました。 * ng再び発砲すると（私は?????）と思っていますので、私の出来事は2回アップしました。

私はリフレッシュの呼び出しを取り払いましたが、これは他のイベントでも発生するため、以下のようにコンポーネントのngOnDestroyメソッドで登録を解除して、誤ったサブスクリプションをノッキングしないようにします。 （サブスクリプションはまだコンストラクタから設定されています）

ngOnDestroy() { 
    this.clearDownSubscriptions(); 
    } 

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