离子 - 按下按钮时加载器

Question

美好的一天，

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

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

我们设置的加载程序是从 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文件中的进度定义（in 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 文件进行了导入以使用进度指示器

Answer 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);
}

离子 - 按下按钮时加载器

Ionic - loader while pressing button

button

loader

typescript

ionic-framework