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

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 函数之前禁用元素属性

Disable element attribute before onclick function is executed

typescript

angular-directive

angular