イベントをディレクティブにバインドするにはどうすればよいですか？

Question

私の指示があり、$イベントの指示に渡したいと思います。

私はdivに要素を落としていますが、私が落としているobjを渡すイベントを介しています。

マイデフォルト（onDropSuccess）=「onDropSuccess（$イベント）」は、イベントをピックアップし、私はすべてを行うことができますが、私は上の（onDropSuccess）が合格したいとどのように私はディレクティブを経由して、それを渡すんイベントを私のcolordropディレクティブに渡し、そこでいくつかの魔法の機能を実行します。

指令

import { Directive, ElementRef, Input, Output, EventEmitter, OnChanges, HostListener, ViewChild, ViewChildren} from "@angular/core"; 

@Directive({ 
    selector: '[colorDropModel]', 
    host: { 
    '(onDropSuccess)' : 'addColor()' 
    } 
}) 

export class colorDropDirective { 
@Input() colorDropModel: string; 
    constructor( private _elementRef: ElementRef){} 

    addColor(event) { 
    console.log('colorDropModel', event) 

    } 
} 

あなたはあなたのディレクティブのイベントにアクセスしようとしている場合のdivにイベントを追加するために持っていけないHTML

<div 
    (onDropSuccess)="onDropSuccess($event)" 
    [colorDropModel]="$event" 
> 
    Dropable area 
</div> 

Answer 1

。

@HostListener('onDropSuccess') onDropSuccess() { 

    } 

、あなたが要素の上にいくつかの魔法をしたい場合は、常にこの

_elementRef.nativeElement 

と要素のホールドを取得した後のような要素の参照を取得することができます：あなたがこれを行うことができ、あなたの指示で あなたは魔法を実装することができます。 これが役立つことを願っています！