防止按钮双击ionic2

时间:2018-01-04 12:26:34

标签: angular ionic2

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

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

1 个答案:

答案 0 :(得分:0)

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