Question

我正在尝试使用Angular中的指令禁用双击按钮。

这是我相关的模板代码：

<button (click)="onClickFunction()" appPreventDoubleClick>Add</button>

这是我的指令：

@Directive({
  selector: "[appPreventDoubleClick]"
})
export class PreventDoubleClickDirective {
  count: number = 0;
  constructor() {}

  @HostListener("click", ["$event"])
  click(event) {
    ++this.count;
    if (this.count > 1) {
      console.log("disabling");
      event.srcElement.setAttribute("disabled",true);
      setTimeout(() => {
        event.srcElement.removeAttribute("disabled");
        this.count = 0;
      }, 1000);
    }
  }
}

我基本上想做的是禁用一个按钮，如果该按钮被单击两次，则在1秒钟后将其重置，以使onClickFunction()被禁用时不会被调用。但是发生的事情是，尽管在@HostListener click()之前调用了onClickFunction()函数，但onClickFunction()仍在执行。我怎么解决这个问题？任何帮助表示赞赏。

编辑：根据评论，我想提一下我是第一次尝试的：

@HostListener("click", ["$event"])
click(event) {
  event.srcElement.setAttribute("disabled", true);
  setTimeout(() => {
    event.srcElement.removeAttribute("disabled");
  }, 1000);
}

但这在逐个情况下起作用，因为在某些情况下，甚至在首次调用该功能之前，该按钮也会被禁用。我想找到一个适用于任何地方的通用解决方案。谁能告诉我为什么会发生这种不匹配，以及我该如何解决？预先感谢。

Answer 1

好的。我找到了解决此问题的方法。这是我的指令，其中包含更新的代码。

@Directive({
  selector: "[appPreventDoubleClick]"
})
export class PreventDoubleClickDirective {
  constructor() {}

  @HostListener("click", ["$event"])
  click(event) {
    setTimeout(() => {
      event.srcElement.setAttribute("disabled", true);
    }, 0);
    setTimeout(() => {
      event.srcElement.removeAttribute("disabled");
    }, 1000);
  }
}

我不确定为什么会这样，希望你们中的一些人有更好的理解。

在执行onclick函数之前禁用元素属性

1 个答案: