角2結合的事件到組件

我有以下角2成分：角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

來源

2016-11-12 Akshat

我不明白問題所在。這是關於什麼「我不能這樣做，因爲這個邏輯必須發生在組件內部，而不是在它之外。」裏面是什麼？什麼是外面？ –

@GünterZöchbauer，我編輯更清晰。我也嘗試過使用bind，但事件有時是錯誤的，就像touchmove在事件參數的touches屬性中沒有任何內容。這在我編輯中使用代碼時不會發生，問題是我無法使用子元素。 – Akshat

使用箭頭功能幫助我btw（謝謝！），它解決了這個問題:) – Akshat

如果您使用箭頭功能則this將工作

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

來源

2016-11-12 17:38:30

角2結合的事件到組件

回答

相關問題