1. 创建 provider
$ ionic g provider helper
最终生成结构如图
4BKCH4MYOM)34AX1F_MIGBD.png
2. 修改helper
如果要查看StorageServiceProvider类，之前有写过，请点击StorageServiceProvider
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import { StorageServiceProvider } from '../storage-service/storage-service';
/*
Generated class for the HelperProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
常用工具类
*/
@Injectable()
export class HelperProvider {
timeOut: Subject<number> = new Subject<number>();//倒计时观察者
interva: any;//定时器
constructor(
private storage: StorageServiceProvider) {
}
/**
* 启动定时器
* @param stareTime 开始时间毫秒数 默认当前
* @param newTime 最新时间毫秒数 默认当前
* @param date 倒计时时间 默认60秒
* @returns 返回Observable 剩余时间
*/
startTime(stareTime: number = new Date().getTime(), newTime: number = new Date().getTime(), date: number = 60): Observable<number> {
if (this.interva) {
clearInterval(this.interva);//清除定时器
}
let remaining: number = Math.ceil(date - ((newTime - stareTime) / 1000));//剩余时间
this.interva = setInterval(() => {
if (remaining > 0) {
remaining--;
} else {
clearInterval(this.interva);//清除定时器
}
this.timeOut.next(remaining);
}, 1000);
return this.timeOut.asObservable();
}
}
3. test.ts中调用
import { StorageServiceProvider } from '../../providers/storage-service/storage-service';
export class Test{
codeBt: string = '发送';//发送验证码按钮文字
time;//监听
code:string;//输入的验证码
constructor(private storage: StorageServiceProvider)
ionViewDidLoad(){
//获取记录的毫秒数
//无轮如何切换页面与退出程序，都将会在点击发送一分钟后才能再次发送
let codeTime = this.storage.read('code-time');
if (codeTime) {
this.setTime(Number(codeTime));
}
/**
* 发送按钮点击事件
*/
onClick(){
this.storage.write('code-time', new Date().getTime());//记录毫秒数
this.setTime();
}
setTime(startTime?){
this.time = this.helper.startTime(startTime).subscribe(number => {
if (number <= 0) {
this.time.unsubscribe();//取消
this.codeBt = '发送';
} else {
this.codeBt = '重新发送(' + number + ')';
}
});
}
/**
* 页面退出时时注销
*/
ionViewDidLeave(){
if(this.time){
this.time.unsubscribe();//取消
}
}
}
test.html
<ion-item>
<ion-label fixed>短信验证码：</ion-label>
<ion-input ([ngModel])="code" placeholder="6位数字" clearInput></ion-input>
<button color="light" type="button" (click)="onClick()" item-right ion-button round [disabled]="codeBt!='发送'">{{codeBt}}</button>
</ion-item>
4. 效果
test.png
倒时结束后恢复
5GNI8%KA(LH{M%I6_0FTZ)L.png
