Question

我有以下Angular 2组件：

import { Component, ElementRef, Renderer } from '@angular/core';;

@Component({
  selector: 'my-button',
  templateUrl: 'button.html'
})
export class ButtonComponent {
  private text: string;
  constructor(
    private elementRef: ElementRef,
    private renderer: Renderer
  ) {
    this.text = 'test';
  }

  touchmove(event) {
    console.log(this)
  }

}

我有按钮的html

{{button}}

我有另一个页面中使用的组件：

我想要做的是绑定<my-button (touchmove)="touchmove()">。我不能这样做，因为这个逻辑必须发生在不在它之外的组件内。

我真的不想在按钮模板中创建一个子元素。我尝试使用以下方法绑定元素：

this.renderer.listen(this.elementRef.nativeElement, 'touchmove', this.touchmove);

上述策略的问题是，当touchmove被触发时，this为空。如果我使用this.renderer.listen(this.elementRef.nativeElement, 'touchmove', this.touchmove.bind(this))也行为奇怪，因为event参数很奇怪，有时它没有触及（当我在组件上使用(touchmove)="touchmove()"样式绑定时不会发生这种情况父母的页面。

是否有正确的方法来绑定事件而不使用我的按钮模板中的子元素，或者获得我遇到的奇怪的绑定问题？

编辑：

在我的组件内部，我的意思是如果我使用我的html而不是{{button}}

<div (touchmove)="touchmove()">{{text}}</div>

它解决了我的问题，但是我无法绑定到这个我想要绑定到包含这个div的元素，组件选择器本身：my-button

Answer 1

如果您使用箭头功能，那么this将起作用

this.renderer.listen(this.elementRef.nativeElement, 'touchmove', (e) => this.touchmove(e));

Angular 2将事件绑定到其选择器级别的组件

1 个答案: