防止按钮双击ionic2

【问题标题】：Prevent button double click ionic2防止按钮双击ionic2
【发布时间】：2018-06-14 04:30:06
【问题描述】：

我在 ionic2 应用程序中使用一个按钮，并使用（点击）。但是如果我在按钮上按 2 次，相同的功能（比如说打开一个模式）会显示两次。在加载异步功能时，我们如何防止双击或偶然多次单击按钮。我希望有一些 dblclick 事件，只是阻止它，但我认为 ionic2 没有。我曾尝试使用 (tap)，但它也接受多次点击。

我是否需要处理这个手册/自定义，并在使用异步调用时将布尔值设置为 true 和 false，并将其用作 [disabled] 属性？

【问题讨论】：

您对自己的问题给出了很好的答案。你试过了吗？
你能提供你的代码吗？

标签： angular ionic2

【解决方案1】：

您可以使用loading 组件来实现这一点。

import { LoadingController } from 'ionic-angular';

export class Util {
  public progressBarLoader : any;
  constructor(public loadingCtrl: LoadingController) {
  }

  showLoader(timeInMilliseconds) {
    let progressBarLoader = this.loadingCtrl.create({
      content: "Please wait...",
      duration: timeInMilliseconds
    });
    progressBarLoader.present();
  }

  hideLoader(){
    try{
      if(this.progressBarLoader != null || this.progressBarLoader != undefined){
        this.progressBarLoader.dismiss();
      }
    }catch(e){      
      console.log("Busy Indecator not showing :: " + e.message);
    }
  }
}

当按钮被点击时调用showLoader() 很长的时间值，当你的异步操作完成时，你可以调用hideLoader()。这将避免多次点击按钮，您不必手动启用/禁用按钮。

【讨论】：