根据点击事件，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，button，input，a，img或甚至一个组件上，所以我不想创建一个组件来处理每种类型的组件，因为它不是动态的全部。

我到目前为止所做的事情

创建使用

来监听点击事件的指令

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

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

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

Answer 1

您可以使用可观察的“主题”来实现。

服务：

dd($request->publicationStatus);

指令：

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

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

参考： https://coryrylan.com/blog/creating-a-custom-debounce-click-directive-in-angular