javascript - 如何使用去抖时间防止Ionic 4中的多次单击？

我试图避免在ionic 4中双击或双击按钮，因为它仅在单击时才触发 Action 。如果我双击，我希望一个 Action 被触发一次而不是两次。我尝试了几个选项，例如“禁用”按钮，“设置超时”，但没有任何效果。在寻找更好的解决方案时，我发现许多论坛建议在Angular中使用debounceTime。

我遵循How to prevent double click in 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>

如果我做错了什么可以帮助我吗？我没有运气寻找 ionic 按钮单击的debounceTime。任何帮助表示赞赏!

最佳答案

尝试在指令的声明部分中导入指令“IonCLickDirective”
您需要使用此模块的地方。

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