[解決済み] typescriptを使用して、同じhtml DOM要素で「シングルクリック」と「ダブルクリック」を処理する方法：Angular 2または4？

質問

私の問題は、私が"ダブルクリック"を実行したときに、両方のイベントに使用されるメソッドがトリガーされることです。

例えば、特定のイベントが発生したときに、特定の機能を実行する必要があります。

<a (click)="method1()" (dblclick)="method2()">

両方 method1() と method2() は、ダブルクリックするとトリガーされます。

解決方法を教えてください。

タイムアウトとブーリアンフラグを使用することで解決できます。 次のように考えてください。

DOMはダブルクリックを認識するのに数ミリ秒かかる。

しかし、ダブルクリックを認識するのは確実ですが、最初のクリックも認識されています。

つまり、次のようなロジックです。

isSingleClick: Boolean = true;     

method1CallForClick(){
   this.isSingleClick = true;
        setTimeout(()=>{
            if(this.isSingleClick){
                 doTheStuffHere();
            }
         },250)
}
method2CallForDblClick(){
         this.isSingleClick = false;
         doTheStuffDblClickHere();
}

要素のクリックイベントでメソッド1、要素のクリックイベントでメソッド2を呼び出します。