Angular 2 Wie fügt man click -Ereignis mit leerer Vorlage hinzu?

Question

Ich habe die folgende Komponente:

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); 
    } 
} 

Da die Vorlage leer ist, wie kann ich ein Click-Ereignis auf die Komponente hinzufügen? Beachten Sie, dass

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

wird nicht funktionieren, weil das Click-Ereignis this.el hinzugefügt wird, anstelle der Komponente selbst (Konsolenprotokoll liefert < Test> </test> statt Testcomponent selbst).

Answer 1

können Sie Host-Hörer verwenden:

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