时间戳

首页 > 解决方案 > Button Debounce 提交表单

angular - Button Debounce 提交表单

问题描述

创建一个 Debounce 指令，我最终会限制点击事件，或者您面临的问题是我的按钮之前有发送事件......例如：

                    <button class="btn btn-light btn-block" type="submit" [hidden]="formCadastrohabilitado">
                        <i class="material-icons center align-middle ">
                            fast_forward
                        </i> INICIAR
                    </button>

他的指令是这样的：

                    <button passeDebounceClick (debounceClick)="" [debounceTime]="500" class="btn btn-light btn-block" [hidden]="formCadastrohabilitado">
                        <i class="material-icons center align-middle ">
                            fast_forward
                        </i> INICIAR
                    </button>

debounce-click-directive.directive.ts：

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

@Directive({
  selector: '[passeDebounceClick]'
})
export class DebounceClickDirectiveDirective implements OnInit {
  @Output() debounceClick = new EventEmitter();
  @Input() debounceTime = 500;
  private clicks = new Subject();
  private subscription: Subscription;

  constructor() {
  }

  ngOnInit() {
    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);
  }
}

我只想提交一个表单，但使用 Debounce 不要双击

标签： angulartypescript

解决方案

debounceTime如果源 observable 在给定的持续时间内没有发出另一个值，您将不会使用 debounceTime 触发器阻止多次点击。您想要实现的目标可以使用排气映射操作符来完成。

您可以为按钮添加模板引用：

<button #submitButton class="btn btn-light btn-block" type="submit" [hidden]="formCadastrohabilitado">
  <i class="material-icons center align-middle ">
      fast_forward
  </i>
  INICIAR
</button>

然后在你的 component.ts 中：

@ViewChild('submitButton', {read: ElementRef, static: true}) button: ElementRef;

ngOnInit(): void {
  fromEvent(this.button.nativeElement, 'click').pipe(exhaustMap((event: MouseEvent) => this.YourService.submitForm(yourData)));
}

Whilethis.YourService.submitForm(yourData)是您的服务发布方法来提交表单数据。在完成exhaustMap之前，操作员将忽略并且不会保存来自可观察源的任何排放this.YourService.submitForm(yourData)。

推荐阅读