web-dev-qa-db-ja.com

ディレクティブから親要素へのイベントを発行する

HTMLテンプレートに要素があります。ディレクティブを追加します：

<div myCustomDirective>HELLO</div>

divにカーソルを合わせると、div内のテキストを変更する必要がありますが、Directive(mouseover)イベント。

Directiveからイベントを発行し、親要素内でキャプチャする方法がわかりません。

どんな助けも大歓迎です。これは、angular2プロジェクトです。

htmlangularangular-directivedom-events
14
raju

myCustomDirectiveに出力@Output() someEvent:EventEmitter = new EventEmitter();がある場合、使用できます

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

@GünterZöchbauerの答えに追加したいのは、structuralディレクティブからイベントを発生させ、アスタリスク（*）ディレクティブを適用するときの構文、それは動作しません。 Angular 5.2.6は、@Output構文で使用される場合、構造ディレクティブの*バインディングをまだサポートしません（ GitHub issue を参照）。

それを脱糖化された形式に変換する必要があります（ こちらを参照 ）、つまり：

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

の代わりに：

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