如何使用 debouncetime 在 Ionic 4 中防止多次点击？

Question

我试图避免在 ionic 4 中双击或双击按钮，因为它应该只在单击时触发操作。如果我双击，我希望一个动作被触发一次而不是 2 次。我尝试了几个选项，例如禁用按钮、settimeout，但没有任何效果。在寻找更好的解决方案时，我发现许多论坛都建议在 Angular 中使用 debounceTime。

我遵循了如何防止在 Angular 中双击？并尝试创建一个指令，但单击“debounceClick”会出现以下错误。

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'debounceTime' since it isn't a known property of 'button'. ("
</ion-content>

<button appIonCLick (debounceClick)="log()" [ERROR ->][debounceTime]="700">Throttled Click</button>

以下是我创建的指令

import {
  Directive, EventEmitter, HostListener, Input, OnDestroy, OnInit,
  Output
} from '@angular/core';
import { Subject } from 'rxjs';
import { Subscription } from 'rxjs';
import { debounceTime } from 'rxjs/operators';


@Directive({
  selector: '[appIonCLick]'
})
export class IonCLickDirective implements OnInit, OnDestroy {

  @Input()
  debounceTime = 500;

  @Output()
  debounceClick = new EventEmitter();

  private clicks = new Subject();
  private subscription: Subscription;

  constructor() { }

  ngOnInit() {
    this.subscription = this.clicks.pipe(
      debounceTime(this.debounceTime)
    ).subscribe(e => this.debounceClick.emit(e));
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  @HostListener('click', ['$event'])
  clickEvent(event) {
    event.preventDefault();
    event.stopPropagation();
    this.clicks.next(event);
  }
}

下面是 HTML

<button appIonCLick (debounceClick)="log()" [debounceTime]="700">Debounce Click</button> 

如果我做错了什么，有人可以帮助我吗？我没有运气为离子按钮单击搜索 debounceTime。任何帮助表示赞赏！

Answer 1

1. 尝试在需要使用该指令的模块的声明部分中导入指令“IonCLickDirective”。
2. <button appIonCLick (debounceClick)="log()" debounceTime="700">Debounce Click</button>试试这个 [debounceTime] -> debounceTime