根据点击事件的Angular 7禁用状态

Question

在 Typescript 3.1.1 中使用 Angular 7

目标

我希望能够添加在上一个点击事件完成（成功与否）之前无法再次触发的点击事件。

示例

<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、button、input、a、img 甚至是组件 ..，我不想为每种类型创建一个组件来处理这个，因为它只是不是动态的全部。

到目前为止我做了什么

使用

创建一个监听点击事件的指令

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

但我不知道如何获得点击事件承诺。它看起来像<div asyncClick (asyncClick)="myOnClick()"></div>，但显然，当myOnClick 被解雇时，我没有等待的承诺。

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

Answer 1

您可以使用 Observable 'Subject' 来实现它。

服务：

@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