javascript - 如果触发点击事件，Angular 会禁用标签一段时间？

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 3 年前。

Improve this question

如何限制用户在一段时间内多次点击 anchor 标记？

我需要在用户单击 anchor 标记后禁用单击事件 1 秒。

 <a (click)="clickMe(Id)">

Answer 1

您可以将 setTimout() 与 [disabled] 属性一起使用。但正如其他人在评论中指出的那样，基于超时限制用户输入并不是一个优雅的解决方案。如果您能解释为什么您想在一段时间内禁用用户输入，这会对您有更好的帮助。

export class AppComponent  {
  disableButton = false;

  onClick(event) {
    this.disableButton = true;
    setTimeout(() => { this.disableButton = false }, 3000);
  }
}

<button [disabled]="disableButton" (mouseup)="onClick($event)">Click me</button>

工作示例:Stackblitz

更新

来自您的评论:

I am opening new window as drawer on button click , but it takes time to open it with all data (data is coming from third party api) , in the meantime , if user is clicking multiple times , multiple windows are opening.

在这种情况下，您需要禁用该按钮，不是基于固定超时，而是直到从 API 收到数据为止。执行以下操作

组件

export class AppComponent  {
  isDataLoading = false;
  label = 'Click me';

  onClick(event) {
    this.setLoadingStatus(true);

    this.http.get('url').subscribe(
      response => {
        this.setLoadingStatus(false);
        // further statements
      },
      error => {
        // handle error
      }
    );
  }

  setLoadingStatus(status: boolean) {
    this.isDataLoading = status;
    this.label = status ? 'Please wait...' : 'Click me';
  }
}

模板

<button [disabled]="isDataLoading" (mouseup)="onClick($event)">{{label}}</button>

更新 2 - anchor 标记

要禁用 anchor 标记，请根据加载标志设置其 href 属性。

<a [attr.href]="isDataLoading ? null : 'url here'" (mouseup)="onClick($event)">{{label}}</a>