如何在按钮单击时创建倒数计时器

Question

您好，我想在 Angular 中忘记密码屏幕

sinario

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

before click 和点击后after click

忘记密码.component.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>

忘记密码.component.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

你可以使用 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; 
}