Comment émettre un événement en passant l'émetteur à l'intérieur d'une fonction angulaire dans 2

Question

Composant PARENT (modèle):

<CHILD></CHILD> 
<overlayer *ngIf="showPopup" (evTogglePopup)="onShowPopup($event)"></overlayer> 

Composant ENFANT (@component):

@Output() evTogglePopup = new EventEmitter(); 
... 
this.inputUt.ajaxCheckExistingEmail(email, this.evTogglePopup); 

un funtion de MyInputUtility (un fournisseur @Injectable importés et utilisés en ENFANT):

ajaxCheckExistingEmail(email, evEmitter:EventEmitter<any>){ 
     if (email.valid){ 
      return this.http.post(
       GLOBAL_CONST.apiPath + "/user/user/api-check-user-email", 
       'email=' + email.value, 
       {headers: this.headers} 
      ).map(response => response.json()) 
      .subscribe(val => { 
       console.log(val); 
       if(val.emailExists){ 
        evEmitter.emit(true); 
       } 
      }); 
     } 
} 

Cette « solution » ne fonctionne pas, et je me demandais i f c'est parce que evEmitter est transmis par copie à la fonction ajaxCheckExistingEmail.

Sosterd par moi-même
Le problème était que « surcouche » est une forme de sélection différent que l'on fait remarquer par CHILD (sélecteur), et je pensais que cela aurait fonctionné aussi bien.

j'ai changé comme ça ci-dessous et maintenant il fonctionne:

<CHILD (evTogglePopup)="onShowPopup($event)"></CHILD> 
    <overlayer *ngIf="showPopup"></overlayer> 

Answer 1

événements de @Output() ne bouillonne pas. Soit vous le transmettez d'un parent à l'autre ou vous pouvez utiliser un service partagé pour partager des données entre des éléments qui ne sont pas dans une relation parent-enfant directe. Pour plus de détails, voir https://angular.io/docs/ts/latest/cookbook/component-communication.html pour plus de détails.