如何使用typescript:Angular 2或4在同一个html DOM元素上处理“单击”和“双击”？

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

@Component({
  selector: 'app-double-click-example',
  template: `
    <button #myButton (click)="onClick($event)">Click or Double Click Me</button>
  `
})
export class DoubleClickExampleComponent implements OnInit {
  @ViewChild('myButton') myButton: ElementRef;
  clickTimer: any;
  clickCount = 0;

  ngOnInit() {
    // 初始化计时器
    this.clickTimer = null;
  }

  onClick(event: MouseEvent) {
    this.clickCount++;

    if (this.clickTimer === null) {
      this.clickTimer = setTimeout(() => {
        if (this.clickCount === 1) {
          this.singleClick();
        } else {
          this.doubleClick();
        }
        this.clickCount = 0;
        this.clickTimer = null;
      }, 200); // 200毫秒内为双击
    }
  }

  singleClick() {
    console.log('Single Click');
    // 在这里处理单击事件
  }

  doubleClick() {
    console.log('Double Click');
    // 在这里处理双击事件
  }
}