web-dev-qa-db-fra.com

Emettre un événement de la directive à l'élément parent

J'ai un élément dans le modèle HTML. J'y ajoute une directive:

<div myCustomDirective>HELLO</div>

Je veux que chaque fois que je survole le div le texte à l'intérieur du div doit être changé, mais cela doit être fait à partir de Directive(mouseover) un événement.

Je ne sais pas comment émettre un événement à partir d'un Directive et capturer à l'intérieur d'un élément parent.

Toute aide est appréciée. Il s'agit du projet angular2.

htmlangularangular-directivedom-events
14
raju

Si myCustomDirective a une sortie @Output() someEvent:EventEmitter = new EventEmitter(); alors vous pouvez utiliser

<div myCustomDirective (someEvent)="callSomethingOnParent($event)">HELLO</div>
44
Günter Zöchbauer

Je voudrais ajouter à la réponse de @ GünterZöchbauer que si vous essayez d'émettre un événement à partir d'une directive structurelle et en utilisant un astérisque (*) syntaxe lors de l'application de la directive, cela ne fonctionnera pas. Angular 5.2.6 ne prend toujours pas en charge @Output obligatoire pour les directives structurelles si utilisé avec le * syntaxe (voir problème GitHub ).

Vous devez le transformer en forme dé-sucrée ( voir ici ), c'est-à-dire:

<ng-template [customDirective]="foo" (customDirectiveEvent)="handler($event)">
  <div class="name">{{hero.name}}</div>
</ng-template>

au lieu de:

<div *customDirective="foo" (customDirectiveEvent)="handler($event)" class="name">{{hero.name}}</div>
10
Alexander Abakumov