Angular 7 отключен статус в зависимости от события нажатия

Question

Использование Angular 7 с Typescript 3.1.1

Цель

Я хочу иметь возможность добавлять события щелчка, которые не могут быть запущены снова, пока не завершится предыдущее событие щелчка(успешно или нет).

Пример

<div>
    <span *ngFor="let a of [1,2,3,4,5,6]" (asyncClick)="onClick(a)">
    </span>
</div>

, тогда как asyncClick заменяет click.asyncClick получает Promise<any> и использует .then на нем.В ожидании срабатывания then кнопка должна находиться в отключенном режиме.

Моя проблема

Поскольку asyncClick можно присоединить к div, span, кнопка, ввод, a, img или даже компонент .., я не хочу создавать компонент для обработки этого для каждого типа, потому что он просто не динамический вообще.

What I 'мы сделали до сих пор

Создание директивы, которая прослушивает события щелчка, используя

@HostListener('click', ['$event'])

, но я не знаю, как получить обещание события щелчка.Похоже на <div asyncClick (asyncClick)="myOnClick()"></div>, но, очевидно, когда myOnClick запущен, у меня нет обещания ждать.

myOnClick (num: number): Promise<any> {
    return Promise.resolve();
}

Answer 1

Вы можете достичь этого, используя наблюдаемый «предмет».

Сервис:

@Injectable({providedIn: 'root'})
export class asyncService {

   getUserData(){
     return from(this.http.get());
   }
}

Директива:

  @Output() debounceClick = new EventEmitter();
  private clicks = new Subject();

  constructor() { }

  ngOnInit() {
    this.clicks.pipe(
      debounceTime(500),
      asyncService.getUserData()
    ).subscribe(e => this.debounceClick.emit(e));
  }

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

Ссылка: https://coryrylan.com/blog/creating-a-custom-debounce-click-directive-in-angular