0
votes

EventEmitter émet des données mais pas un événement

Je lutte dans un scénario particulier. Voici à quoi ressemble ma classe Parent and Child

export class ChildComponent{
    .....
    @Output select: EventEmiiter<SomeType> = new EventEmmiter();
    ....
    ....

    methodWhichEmits(){
          this.select.emit(objectOf_SomeType);
    }
}




 export class ParentComponent{

        onSelect(emittedObject){
              //perform some logic
              event.stopPropagation();
        }
    }



 Parent Template
   <child (select)="onSelect($event)"></child>

Je crois comprendre (étant nouveau dans angular) qu'un événement est émis par child et capté par le parent puis la logique est exécutée dans la méthode parent onSelect sur l'événement émis (liaison d'événement).

Mais le problème est que le paramètre de la méthode parente n'est pas un événement mais l'objet de SomeType passé par child. Je souhaite recevoir un événement dans ma méthode parent et accéder aux données émises par child en utilisant l'objet événement (quelque chose comme event.target.value) car j'ai besoin de l'objet événement pour invoquer stopPropagation () sur.

Même si le code fonctionne bien mais le cas de test échoue (sur topPropagation ()) car au lieu d'événement, un objet de SomeType est reçu dans la méthode parent.

angular events event-handling event-binding

0 commentaires

3 Réponses :

2
votes

Un EventEmitter n'est pas un événement HTML mais une extension d'un Subject donc il n'enverra qu'un événement avec une valeur

0 commentaires

0
votes

Les événements Anguar personnalisés ne ressemblent pas aux événements natifs. Ils ne sont que des objets comme vous l'avez remarqué, ils ne se propagent pas et ils ne peuvent pas être annulés.

0 commentaires

1
votes

Si vous pouviez renoncer au type SomeType , une solution de contournement serait d'appeler stopPropagation () dans le composant enfant et d'envoyer la cible comme paramètre d'événement. Essayez le

Composant enfant suivant

onSelect(target: any) {
  // handle target  
}

Composant parent - Modèle

<app-child (select)=onSelect($event)></app-child>

Composant parent - Contrôleur

export class ChildComponent implements OnInit {
  @Output() select = new EventEmitter();

  handleSomething(event) {
    event.stopPropagation();
    this.methodWhichEmits(event.target);
  }

  methodWhichEmits(value) {
    this.select.emit(value)
  }
}

Si vous essayez d'envoyer l ' événement directement en tant que valeur d'émetteur, il peut y avoir des effets secondaires indésirables dus au bouillonnement d'événement.

0 commentaires