角2空のテンプレートでクリックイベントを追加するにはどうすればよいですか？

Question

I持って、次のコンポーネント：私はコンポーネントにクリックイベントを追加する方法

import {Component, ElementRef} from 'angular2/core'; 

@Component({ 
    selector: 'test', 
    template: '' 
}) 
export class TestComponent { 

    el; 

    constructor(public elementRef: ElementRef) { 
     this.el = elementRef.nativeElement; 
     this.renderer = new THREE.WebGLRenderer(); 
     this.el.appendChild(this.renderer.domElement);  
    } 

    onClick() { 
     console.log(this); 
    } 
} 

テンプレートが空なので、？クリックイベントが代わりにコンポーネント自体の（コンソールログはなくTestComponent自体より<試験> < /試験>を返す）、this.elするために添加されているので

this.el.addEventListener('click', this.onClick, false); 

が動作しないことに注意してください。

Answer 1

あなたは、ホスト・リスナーを使用することができます。

@Component({ 
    selector: 'test', 
    template: '' 
    host: {'(click)':'clickHandler($event)'} 
}) 
export class TestComponent { 
    // @HostListener('click') // alternative way to the decorator argument 
    clickHandler() { 
    doSomething(); 
    } 
}