Кнопка Отменить Отправить форму

Question

Создайте директиву Debounce, где я в конечном итоге ограничу количество событий click, или проблема, с которой вы сталкиваетесь, заключается в том, что у моей кнопки было событие send раньше ... Например:

                    <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 не удваивать нажмите

Answer 1

Вы не предотвратите множественные клики с помощью debounceTime, 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)));
}

В то время как this.YourService.submitForm(yourData) - это ваш метод отправки сообщений для отправки данных формы. Оператор exhaustMap будет игнорировать, а также не сохранять какие-либо выбросы из наблюдаемого источника, пока не завершится this.YourService.submitForm(yourData).