离子 - 加载器同时按下按钮答案

【问题标题】：Ionic - loader while pressing button离子 - 加载器同时按下按钮
【发布时间】：2018-11-22 14:54:54
【问题描述】：

早安，

我目前的要求是，在按下按钮时，应该出现一个加载器......背后的原因是为了避免意外按下按钮，并显示长按的进度......

我能够获得印刷机的开始和结束，以及两次印刷机之间的时间，但是我正在努力让自定义加载程序在印刷机期间启动。对于我们公司和我自己来说，这是一个相当新的框架，我仍在学习......

我们设置的加载器是从https://github.com/bootsoon/ng-circle-progress安装的...

这是我的触摸事件代码（.ts 文件）：

touchEvent(e)
{
  console.log(e);
  if(e.type == 'mousedown' || e.type == 'touchstart')
  {
    this.sTime = new Date();
    console.log(this.sTime.valueOf());
    this.startLoader(); //this is currently not working
  }

  if(e.type == 'mouseup' || e.type == 'touchend')
  {
    this.eTime = new Date();
    console.log(this.eTime.valueOf());

    var diff = this.eTime.valueOf() - this.sTime.valueOf();
    var diffText = diff + 'ms';
    this.time.innerHTML = diffText;
    this.stopLoader(); // this currently is not working
  }
  console.log(e.timeStamp);
}

html文件中的进度定义（在ion-content中）：

<ion-row>
  <ion-col col-12 #progressTesting>
    <circle-progress
      class="center"
      [percent]="100"
      [animation]="true"
      [animationDuration]="3000"
      id='progressTest' 
    ></circle-progress>
  </ion-col>
</ion-row>

我还对 module.ts 文件进行了导入以使用进度指示器

【问题讨论】：

标签： typescript button ionic-framework loader

【解决方案1】：

我最终使用了一个 observable 来让它工作......

startLoader(eType) { //eType is the event type
  this.showloader = true; // this is a public variable which i use in HTML side in a *ngIf to show or hide the loader

  this.myObservable =  Observable.create(observer => {
   observer.next(
        this.dealWithNextObserver(observer,eType)
    );

    setInterval(() => {
      observer.next(
        this.dealWithNextObserver(observer,eType)
      );
    },30);
  });

  this.myObservable.subscribe((data) => {
  console.log('observer did run');

  });
}

dealWithNextObserver(observer,type)
{
  if(type !== 'mousedown' && type !== 'touchstart')
  {
    this.showloader = false;
    observer.complete();
  }
}

我还更新了我的 touchEvent 方法：

touchEvent(e)
{
  console.log(e);

  if(e.type == 'mousedown' || e.type == 'touchstart')
  {
    this.sTime = new Date();
    console.log(this.sTime.valueOf());
    this.startLoader(e.type);
  }

  if(e.type == 'mouseup' || e.type == 'touchend')
  {
    this.eTime = new Date();
    console.log(this.eTime.valueOf());
  }
  console.log(e.timeStamp);
}

【讨论】：