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文件中的进度定义（在离子内容中）：

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

离子 - 按下按钮时的装载机

1 个答案: