Как сделать двойной щелчок вместо одного, чтобы открыть файл в угловом

Question

Это перетаскивание файла в угловом формате.Два способа загрузки файлов: перетаскивание или щелчок по значку, выбор и загрузка файла.

Здесь перетаскивание не является проблемой.Но если я щелкну значок плюса, откроется окно поиска (диск в Windows), и я могу выбрать любое изображение или файл для загрузки.

Всякий раз, когда я нажимаю значок плюса, он открывает окно поиска.Но я хочу открыть искатель только тогда, когда дважды щелкну по значку.Если щелкнуть один раз, это не должно позволить открыть искатель.

Пожалуйста, найдите приведенный ниже пример стекаблица для загрузки файла.

stackblitz

<input-file placeholder="Pictures"
            fileAccept="image/*" 
            fileLimit="2"  
            (dblclick)="openFolder()"></input-file>

Может кто-нибудь, пожалуйста, помогите мне сделать это?

Answer 1

Одним из быстрых способов взлома было бы просто проверить время событий щелчка:

<input-file fileAccept="image/*" fileLimit="2" placeholder="Pictures" (click)="openFolder()"></input-file>

.

private lastClick: number

openFolder () {
    const now = Date.now()

    // replace 1000 with whatever maximum interval you want to count as a double click
    if (now - this.lastClick < 1000) {
        // open the folder
    } else {
        this.lastClick = now
    }
}

Answer 2

Вы можете попытаться сохранить состояние кнопки на объекте dataset кнопки:

export class AppComponent { 
  button;

  click(ev) {
    if (ev.target.tagName === 'INPUT') {
      !this.button && (this.button = ev.target);
      if (!this.button.dataset.allowClick) {
        ev.preventDefault();
      }
      else {
        delete this.button.dataset.allowClick;
      }
    }
  }

  dblclick(ev) {
    this.button.dataset.allowClick = true;
    this.button.click();
  }
}

HTML:

<input-file (click)="click($event)" 
            (dblclick)="dblclick($event)"
            placeholder="Drop files below!"></input-file>

STACKBLITZ

Answer 3

// Вы можете использовать переменную «пока».Если это правда, сделайте (щелчок), иначе предотвращение по умолчанию

<input-file (click)="click($event)" (dblclick)="openFolder($event)" 
         placeholder="Drop files below!">
</input-file>

In yout .ts

  yet:boolean=false; //A variable
  openFolder($event)
  {
    //create a mouseEvent 
    let event = new MouseEvent('click',{
    view: window,
    bubbles: true,
    cancelable: true
  });
    this.yet=true;  //equal variable to true
    var cancelled = !$event.target.dispatchEvent(event);
     this.yet=false;  //return the value to false
  }
  click($event)
  {
    if (!this.yet) //If variable is false
    {
      $event.preventDefault();
      return false;
    }
  }