角2でクリック＆ホールドを聞くにはどうすればいいですか？

Question

In this linkでは、AngularJSで例を見つけることができます。

しかし、これはどのように角度2で機能しますか？

Answer 1

単純な実装は、このようになります。

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2 (mousedown)="mousedown()" (mouseup)="mouseup()" (mouseleave)="mouseup()">Hello {{name}}</h2> 
    </div> 
    `, 
}) 
export class App { 
    name: string; 
    timeoutHandler: number; 

    constructor() { 
    this.name = 'Angular!' 
    } 
    public mouseup() { 
    if (this.timeoutHandler) { 
     clearTimeout(this.timeoutHandler); 
     this.name = "canceled"; 
     this.timeoutHandler = null; 
    } 
    } 

    public mousedown() { 
    this.timeoutHandler = setTimeout(() => { 
     this.name = "has been long pressed" 
     this.timeoutHandler = null; 
    }, 500); 
    } 
} 

これは、ユーザーが設定した時間の前に離れてクリックした場合はキャンセルされるタイムアウトを設定します。

有効なplnkr hereが見つかります。

あなたが望むものがクリックを保持しているときに起きるようにするには、setIntervalのためにsetTimeoutを入れ替えてください。

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2 (mousedown)="mousedown()" (mouseup)="mouseup()" (mouseleave)="mouseup()">Hello {{name}}</h2> 
    </div> 
    `, 
}) 
export class App { 
    name: number = 0; 
    timeoutHandler: number; 

    constructor() { 
    this.name = -1 
    } 
    public mouseup() { 
    if (this.timeoutHandler) { 
     clearInterval(this.timeoutHandler); 
     this.name = 0; 
     this.timeoutHandler = null; 
    } 
    } 

    public mousedown() { 
    this.timeoutHandler = setInterval(() => { 
     this.name += 1; 
    }, 100); 
    } 
} 

作業plnkrがhere見つけることができます。