角度2のセレクタレベルのコンポーネントへ結合事象

Question

Iは、次の角度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) 
    } 

} 

Iを有するが、その中で使用される成分を有する

{{button}} 

ボタンのHTML別のページ：

私がやりたいことはをバインドすることです0。私はこれを行うことはできませんが、これのためのロジックは、コンポーネントの内部ではなく内部で行われなければならないためです。

ボタンテンプレートの中にサブ要素を作りたいとは思っていません。

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

をtouchmoveがthisがnullの場合、発射された時には、上記の戦略に問題が、しかしである：私は使用して要素への結合を試みました。私は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));