Question

我有以下组件：

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

由于模板为空，如何向组件添加click事件？注意

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

由于click事件被添加到this.el而不是组件本身（控制台日志返回＆lt; test＆gt;＆lt; / test＆gt;而不是TestComponent本身），因此

无法工作。

Answer 1

您可以使用host-listener：

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

Angular 2如何使用空模板添加click事件？

1 个答案: