Ionic - загрузчик при нажатии кнопки - PullRequest
Новая
       7

Ionic - загрузчик при нажатии кнопки

0 голосов
/ 13 июня 2018

Добрый день,

В настоящее время при нажатии кнопки требуется, чтобы появился загрузчик ... причина этого заключается в том, чтобы избежать случайного нажатия кнопки и отображать ход выполнениядлинное нажатие ...

Мне удалось получить начало и конец печати, а также время между двумя нажатиями, однако я изо всех сил пытаюсь заставить пользовательский загрузчик запускаться во время печати.Это довольно новый фреймворк для нашей компании и меня, и я все еще учусь ...

Загрузчик, который мы установили, был установлен с https://github.com/bootsoon/ng-circle-progress...

Вот мой код сенсорных событий (.tsfile): 

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, чтобы использовать прогрессиндикатор

1 Ответ

0 голосов
/ 14 июня 2018

В итоге я использовал наблюдаемое, чтобы заставить это работать ... 

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