如何排除重复单击事件

Question

我在模板中有几个组件，它们有一个<div (click) = "edit (obj)"> </div>事件绑定

相同类型的处理程序：

public edit(actdoc: any): void {
this.applicationRelationShipsService
.get(actdoc.actdocid)
.pipe(
indicate(this.loading$),
observableTimestampResponse(),
switchMap((actdoc) =>
this.dialog
.open(DialogAddExistingRelationshipDetailsComponent, {
...this.dialogConfig,
height: '480px',
data: {
appid: this.application.appid,
mode: MODES.EDIT,
actdoc
},
})
.afterClosed()
.pipe(
filter(Boolean),
concatMap(() => this.applicationRelationShipsService.getByAppId(this.application.appid)),
),
),
)
.subscribe((actdocs) => {
this.actdocs = actdocs.slice();
this.changeDetection.detectChanges();
});
}

如何排除重复点击和this.applicationRelationShipsService.get()调用。直到对话框打开然后关闭。或者请求失败。

作为解决方案，我可以在每个组件中定义一个公共process$ = new BehaviorSubject<boolean>(false);，并在rxjs中使用它，但我真的不想用Subject污染组件。

Answer 1

您可以使用css禁用指针事件。另一种解决方案是创建一个标志，类似于以下内容：

public edit(actdoc: any): void {
if(this.canEdit) {
this.canEdit = false; 
this.applicationRelationShipsService
.get(actdoc.actdocid)
.pipe(
indicate(this.loading$),
observableTimestampResponse(),
switchMap((actdoc) =>
this.dialog
.open(DialogAddExistingRelationshipDetailsComponent, {
...this.dialogConfig,
height: '480px',
data: {
appid: this.application.appid,
mode: MODES.EDIT,
actdoc
},
})
.afterClosed()
.pipe(
filter(Boolean),
concatMap(() => this.applicationRelationShipsService.getByAppId(this.application.appid)),
),
),
)
.subscribe((actdocs) => {
this.canEdit = true;
this.actdocs = actdocs.slice();
this.changeDetection.detectChanges();
});
}
}

Answer 2

一个editing=false的简单属性怎么样；然后在编辑开始时将editing设置为true，并返回if(this.editing(；在关系服务之前