typescript - 离子 - 加载器同时按下按钮
问题描述
再会,
我目前有一个要求,在按下按钮时,应该出现一个加载器......这背后的原因是为了避免意外按下按钮,并显示长按的进度......
我能够获得印刷机的开始和结束,以及两台印刷机之间的时间,但是我正在努力让自定义装载机在印刷机开始时启动。对于我们公司和我自己来说,这是一个相当新的框架,我仍在学习......
我们设置的加载器是从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 文件进行了导入以使用进度指示器
解决方案
我最终使用了一个 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);
}
推荐阅读
- firefox - Firefox 60 上的安全连接失败
- java - 如何等待 ExecutorService 中的一个正在运行的线程完成分配另一个任务
- python - 使用python从xml文件中提取数据时出错
- java - REST Web 服务中的 spring 安全性
- rstudio - 动态设置PDF输出名称离子Rmarkdown
- google-cloud-platform - 无法在澳大利亚区域启动 Composer env:“INVALID_ARGUMENT:意外位置:australia-southeast1”
- logging - 打开访客网络流量监视器 OS X
- automapper - 将 int (Id) 映射到 Model 实例
- c# - .NET WebApi - 如何接收带有附加参数的文件?
- svgpanzoom - 如何在 SVG PanZoom 中添加动画