constructeur étant appelé duplicate dans * ngFor en raison de @ViewChild

Question

J'ai un composant angulaire que j'ai créé, que j'utilise dans une directive * ngFor et il apparaît que le constructeur est appelé deux fois pour chaque instance.

Donc si j'ai 2 enregistrements retournés à ma collection, le constructeur de mon composant est entré 4 fois. Si j'en ai trois le constructeur est tiré 6 fois. Cela me cause des problèmes car je suis abonné aux observables RxJ dans le constructeur, donc mes événements sont traités en double alors quand je manipule un événement delete, le code essaye de supprimer plusieurs fois le même enregistrement et échoue après le premier (succès) appel.

structure code

est comme si:

extérieur composante la plus

<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> 

Mon élément qui est affecté est la composante vacances-edit-corps, qui est transclus dans mon étendu -inline-edit le composant l'hébergeant (ne sait pas si la transclusion affecterait le nombre de fois où le constructeur est déclenché?)

Ma collection est peuplée dans le ngOnInit des plus composant extérieur, holidays.ts comme ci-dessous:

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

Mon problème semble avoir été causé par un autre composant la hiérarchie ayant une référence à mon « Parent » Composant avec un attribut @ViewChild et dans ce code, un appel a été fait pour actualiser ma collection de sorte que 2 jours fériés aient été récupérés à partir de DB et que mes composants aient été créés selon le * ngFor. * ng Pour tirer à nouveau (je présume ????) ainsi mes événements ont été câblés deux fois.

Je me suis débarrassé de l'appel à rafraîchir MAIS cela se produirait encore sur d'autres événements ainsi désabonné dans la méthode ngOnDestroy de mon composant comme ci-dessous pour s'assurer qu'aucun abonnement erroné ne vienne frapper! (Les abonnements configurés à partir du constructeur sont toujours)

ngOnDestroy() { 
    this.clearDownSubscriptions(); 
    } 

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