Angular 7 событий одного и двух щелчков - PullRequest
Новая
       19

Angular 7 событий одного и двух щелчков

0 голосов
/ 13 февраля 2019

Моя строка таблицы настроена, как показано ниже, 

<tr  *ngFor="let v of mf.data | sortgrid: '-lastheartbeat'; index as i"
            [class.table-success]="venuesRunning[i]" [routerLink]="['/invoices', v.userid]">

Приведенный выше фрагмент кода работает для одного щелчка по строке.Я пытался связать двойной клик по вышеуказанному коду 

<tr  *ngFor="let v of mf.data | sortgrid: '-lastheartbeat'; index as i"
            [class.table-success]="venuesRunning[i]" [routerLink]="['/invoices', v.userid]"
            (dblclick)="somefunction()">

Но теперь также работает только один клик.Двойной щелчок сработал, когда [routerlink] был удален.

<tr  *ngFor="let v of mf.data | sortgrid: '-lastheartbeat'; index as i"
            [class.table-success]="venuesRunning[i]"
            (dblclick)="somefunction()">

Что мне нужно сделать, чтобы добиться одинаковых и двойных щелчков в Angular 7?

1 Ответ

0 голосов
/ 13 февраля 2019

Здесь вы можете использовать тайм-аут и логический флаг для решения этой проблемы.

Примите во внимание следующее:

DOM требуется несколько миллисекунд для распознавания двойного щелчка.

Но он распознает двойной щелчок, но первый щелчок также распознается.

Таким образом, логика выглядит следующим образом.

your.component.ts 

export class App {

  preventSingleClick = false;
  timer: any;
  delay: Number;

  singleClick(event) {
    this.preventSingleClick = false;
     const delay = 200;
      this.timer = setTimeout(() => {
        if (!this.preventSingleClick) {
           //Navigate on single click
        }
      }, delay);
  }

    doubleClick (event) {
      this.preventSingleClick = true;
      clearTimeout(this.timer);
      //Navigate on double click
    }
 }

HTML 

<tr  *ngFor="let v of mf.data | sortgrid: '-lastheartbeat'; index as i"
            [class.table-success]="venuesRunning[i]"  (click)="singleClick($event)" (dblclick)="doubleClick($event)" >
...