如何创建倒数计时器，从时间选择器输入中选择时间并以角度显示所选时间与当前时间的差异

Question

这是我的打字稿文件

import { Time } from '@angular/common';
import { Component, OnInit, Pipe, PipeTransform } from '@angular/core';
import {  interval, Subscription, timer } from 'rxjs';
import {NgbTimeStruct} from '@ng-bootstrap/ng-bootstrap';



@Component({
   selector: 'app-timer-app',
   templateUrl: './timer-app.component.html',
   styleUrls: ['./timer-app.component.css']
})

export class TimerAppComponent implements OnInit {

time : NgbTimeStruct= {hour: 13, minute: 30 , second: 25};
   
seconds = true;


constructor() { }

ngOnInit() {
   this.startInterval();
   console.log(this.time)
}
ngOnDestroy(){
    this.subscription.unsubscribe();
}

stop(){
   this.countDown.unsubscribe();
}
start(){
     this.countDown = timer(0, this.tick).subscribe(() => --this.counter);
}


private timeinterval = interval;
private subscription!: Subscription;

public dateNow = new Date();
public dDay = this.model.getTime();
milliSecondsInASecond = 1000;
hoursInADay = 24;
minutesInAnHour = 60;
SecondsInAMinute = 60;

public timeDifference: any;
public secondsToDday: any;
public minutesToDday: any;
public hoursToDday: any;
public daysToDday: any;

private getTimeDifference() {
   this.dDay = this.time
   this.timeDifference = this.dDay - new Date().getTime();
   this.allocateTimeUnits(this.timeDifference);
}

private allocateTimeUnits(timeDifference: any) {
   this.secondsToDday = Math.floor(
    (timeDifference / this.milliSecondsInASecond) % this.SecondsInAMinute
);
 this.minutesToDday = Math.floor(
    (timeDifference / (this.milliSecondsInASecond * this.minutesInAnHour)) %
     this.SecondsInAMinute
);
 this.hoursToDday = Math.floor(
   (timeDifference /
     (this.milliSecondsInASecond *
      this.minutesInAnHour *
      this.SecondsInAMinute)) %
    this.hoursInADay
);
this.daysToDday = Math.floor(
  timeDifference /
    (this.milliSecondsInASecond *
      this.minutesInAnHour *
      this.SecondsInAMinute *
      this.hoursInADay)
);}


 stopInterval() {
   this.subscription.unsubscribe();
 }
 startInterval() {
   this.subscription = this.timeinterval(1000).subscribe(x => {
  //  console.log('get TD', this.timeDifference);
  this.getTimeDifference();
 
 });
 }
}

我在我的逻辑中遇到问题当我选择它在我的变量中显示的时间但倒计时是没有开始，倒计时没有反应请任何人都可以帮助我如何做到这一点

这是我要显示倒计时的 HTML 文件

   <div class="container">
       <h1 class="text-success">Date Picker App</h1>
       <ngb-timepicker [(ngModel)]="time" [seconds]="seconds" ></ngb-timepicker>
       <hr>
       <pre> Seleted TIme Is : <strong>{{newTime}}</strong></pre>
  </div>

 <!--Count Down Timer DIsplay -->

  <div class="timer" *ngIf="model">
        <h2>Time Left</h2>

        <span id="hours"> {{hoursToDday}} </span>Hrs
        <span id="minutes"> {{minutesToDday}} </span>Min
        <span id="seconds"> {{secondsToDday}} </span>S <br>
        <div class="mt-3">
            <button  (click)="stopInterval()" class="btn btn-danger btn- 
            sm">Stop</button>
            <button  (click)="startInterval()" class="btn btn-info btn-sm 
            "id="resetbtn">Restart</button>
        </div>

Answer 1

使用下面的代码 stackblitz 链接，stackblitz

import { Component } from '@angular/core';
import { NgbTimeStruct } from '@ng-bootstrap/ng-bootstrap';
import { Subscription } from 'rxjs';
import { interval } from 'rxjs/observable/interval';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 12';
  time: NgbTimeStruct = {
    hour: 2,
    minute: 50,
    second: 50
  };
  seconds = true;
  // timeData= this.time

  constructor() {}
  newInterVal: any;
  public timeDifference: any;
  public timeDiffereneRunning: NgbTimeStruct = null;
  public secondsToDday: any;
  public minutesToDday: any;
  public hoursToDday = this.time.hour;

  private getTimeDifference() {
    // this.dDay = this.time

    this.allocateTimeUnits();
  }
  private allocateTimeUnits() {
    let dateNow = new Date();

    let seconds = Math.floor(
      (new Date(this.timeDifference).getTime() - dateNow.getTime()) / 1000
    );
    let minutes = Math.floor(seconds / 60);
    let hours = Math.floor(minutes / 60);
    let days = Math.floor(hours / 24);

    hours = hours - days * 24;
    minutes = minutes - days * 24 * 60 - hours * 60;
    seconds = seconds - days * 24 * 60 * 60 - hours * 60 * 60 - minutes * 60;

    this.hoursToDday = hours;

    this.minutesToDday = minutes;
    this.secondsToDday = seconds;
  }

  //  Start Stop Implementation

  ngOnInit() {
    this.startInterval();
    console.log(this.time);
  }
  ngOnDestroy() {}

  stopInterval() {
    this.timeDiffereneRunning = {
      hour: this.hoursToDday,
      minute: this.minutesToDday,
      second: this.secondsToDday
    };
    clearInterval(this.newInterVal);
  }
  startInterval() {
    let time_diff = this.time;
    if (this.timeDiffereneRunning) {
      time_diff = this.timeDiffereneRunning;
    }
    let newDate = new Date(
      new Date().setHours(new Date().getHours() + time_diff.hour)
    );
    newDate = new Date(
      newDate.setMinutes(newDate.getMinutes() + time_diff.minute)
    );
    newDate = new Date(
      newDate.setSeconds(newDate.getSeconds() + time_diff.second)
    );
    this.timeDifference = newDate;
    console.log('diff', new Date(this.timeDifference));

    this.newInterVal = setInterval(() => {
      this.getTimeDifference();
    }, 1000);
  }
  getValue() {
    console.log(
      'Value Of Hour:',
      this.time.hour,
      'Value Of Minute:',
      this.time.minute,
      'Value Of Seconds:',
      this.time.second
    );
    //  console.log('Value Of Minute',this.time.minute)
    //  console.log('Value Of Seconds', this.time.second)
    //  console.log({data: this.time})
  }
}