防止按钮双击ionic2

Question

我在ionic2 app中使用了一个按钮，然后使用（点击）。但是，如果我按下按钮2次，相同的功能（让我们说打开一个模态）显示两次。在加载异步功能时，我们如何防止双击或偶然多次点击按钮。我希望有一些dblclick事件，并且只是阻止它，但我不认为ionic2有这个。我尝试过使用（点击），但它也接受了几次和多次点击。

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

Answer 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()。这将避免多次点击按钮，您不必处理手动启用/禁用按钮。