如何创建倒计时定时器按钮点击在角度

Question

嗨，我正在尝试在角度中忘记密码屏幕

sinario

1. 用户输入他们的电子邮件id并点击提交按钮
2. 点击提交按钮后，该按钮应被禁用，并显示倒计时计时器2分钟。我附上了屏幕截图
3. 2分钟后恢复正常

点击前和点击后

伪造密码组件.html

<form class="form-horizontal login100-form m-auto" [formGroup]="loginForm">
<p class="h4 login-header">Forgot password</p>
<div class="form-group form-group-lg">
<mat-form-field [appearance]="'outline'" class="w-100">
<mat-label>Email-id</mat-label>
<input matInput formControlName="user_email" #t>
</mat-form-field>
</div>
<div class="form-group form-group-lg">
<button type="button" class="btn login-button btn-block"
(click)="onResetPassword()" [disabled]="f.user_email.errors && f.user_email.errors.required">
Send password reset
link
</button>
</div>
<div class="contact100-form-checkbox ">
<div class="d-flex">
<div class="mr-2">
<a (click)="forgetpassword = false" class="txt1"
style="   font-size: 20px;">Sign-in</a>
</div>
</div>
</div>
</form>

伪造密码组件.ts

onResetPassword() {
const email = this.loginForm.value.user_email;
console.log(this.loginForm.controls.user_email.errors);
this.userService.gerResetPassword(email).subscribe(data => {
alert(JSON.stringify(data));
console.log(data);
// this.show = true;
},
error => {
console.log(error);
}
);

}

我在网上找不到什么资源，但对我没有任何帮助…

Answer 1

https://stackblitz.com/edit/angular-kswlfw

U可以使用rxjs库中的Observable。

创建间隔

this.timer = interval(1000)
.pipe(
takeUntil(this.ispause)
);
this.timerObserver = {
next: (_: number) => {  
if(this.time==0){this.ispause.next;}
this.time -= 1;        
}
};

并在点击功能中调用它

<button (click)="goOn()"> {{secondsToHms(time)}}</button>
goOn() {
this.timer.subscribe(this.timerObserver);
}

该功能用于显示计时器的格式

secondsToHms(d) {
d = Number(d);
var m = Math.floor(d % 3600 / 60);
var s = Math.floor(d % 3600 % 60);
var mDisplay = m > 0 ? m + (m == 1 ? ": " : " : ") : "00";
var sDisplay = s > 0 ? s + (s == 1 ? "" : "") : "00";
return mDisplay + sDisplay; 
}