angular2の@Directiveでクリックイベントを処理する方法は？

Question

ディレクティブ上またはディレクティブ内の要素にクリックイベントを添付できますか？例えば、（構成要素ではない）.. Iのように定義ディレクティブは以下た：私は@directive自体に関連付けられたすべてのテンプレートを持っていないことに注意し、index.htmlを（そのディレクティブを使用し、HTMLで

import { Directive, OnInit, Input, ElementRef, Renderer } from '@angular/core'; 
declare var $: any; // JQuery 

@Directive({ 
    selector: '[gridStack]' 
}) 
export class GridStackDirective implements OnInit { 
    @Input() w: number; 
    @Input() animate: boolean; 

    constructor(
     private el: ElementRef, 
     private renderer: Renderer 
    ) { 
     renderer.setElementAttribute(el.nativeElement, "class", "grid-stack"); 
    } 

    ngOnInit() { 
     let renderer = this.renderer; 
     let nativeElement = this.el.nativeElement; 
     let animate: string = this.animate ? "yes" : "no"; 

     renderer.setElementAttribute(nativeElement, "data-gs-width", String(this.w)); 
     if(animate == "yes") { 
      renderer.setElementAttribute(nativeElement, "data-gs-animate", animate); 
     } 

     let options = { 
      cellHeight: 80, 
      verticalMargin: 10 
     }; 

     // TODO: listen to an event here instead of just waiting for the time to expire 
     setTimeout(function() { 
      $('.grid-stack').gridstack(options); 
     }, 300); 
    } 

} 

、私はそれがコンポーネントの場合、この作品を知ってクリックイベント？：

<div gridStack> 
<div><a (click)="clickEvent()">Click Here</a></div> 
</div> 

を含めることができますが、それが可能であるならば、それは指示で作業を取得しようとする探しています。

Answer 1

あなたは添付することができますあなたのディレクティブ定義のHostListenerデコレータを介してクリックイベントに移動します。

@HostListener('click', ['$event']) onClick($event){ 
     console.info('clicked: ' + $event); 
    } 

は角ドキュメントhere

そしてthis question