Как синхронизировать c часы с пользовательским временем в Angular 2 и выше

Question

Следующий код отображает аналоговые и цифровые часы, с помощью которых считывается время из Date (). Поле ввода времени HTML используется для захвата времени от пользователя. После того, как пользователь выбирает настраиваемое время и нажимает кнопку синхронизации c, часы должны быть синхронизированы с настраиваемым временем и продолжать тикать. Я пробовал несколько вещей с setInterval () в Syn c (), но не получил желаемого результата и не мог придумать другого способа его достижения. Пожалуйста, поделитесь некоторыми идеями для этого. Ссылка на Stackblitz

   import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="Sync()" id=sync>Sync</button>
    
    <div class="clock">
      <div class="analog-clock">
        <div class="hour hand" [ngStyle]="hourHandStyle"></div>
        <div class="minute hand" [ngStyle]="minuteHandStyle"></div>
        <div class="second hand" [ngStyle]="secondHandStyle"></div>
        <div class="center-circle"></div>
        <input type="time" id="appt" name="appt" step=1 value="">
      </div>
      <div class="digital-clock">{{format(hour)}}:{{format(minute)}}:{{format(second)}}</div>
      <span>{{inputValue}}</span>
    </div>
    <div>{{inputValue}}</div>
  `,
  styles: [`
    @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');

    .analog-clock {
      position: relative;
      margin: 100px auto 0;
      width: 200px;
      height: 200px;
      background-color: aliceblue;
      border-radius: 50%;
    }

    .hand {
      position: absolute;
      left: 50%;
      width: 1px;
      height: 100px;
      transform-origin: 100% 100%;
    }

    .hour {
      background-color: #f44336;
    }

    .minute {
      background-color: #3f51b5;
    }

    .second {
      background-color: #9e9e9e;
    }

    .center-circle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      width: 12px;
      height: 12px;
      background-color: black;
      border-radius: 50%;
    }

    .digital-clock {
      position: absolute;
      top: 350px;
      left: 50%;
      transform: translate3d(-50%, 0, 0);
      font-size: 2em;
      font-family: 'Source Code Pro', monospace;
    }
  `]
})
export class AppComponent implements AfterViewInit {

  hourHandStyle; 
  minuteHandStyle; 
  secondHandStyle; 

  isRunning = true;
  timerId: any;

  date: Date;
  hour: number = 0;
  minute: number = 0;
  second: number = 0;

  hh1: any; mm1: any; ss1: any;

  ngAfterViewInit() {
    this.timerId = this.getTime();
  }

  animateAnalogClock() {
    this.hourHandStyle = { transform: `translate3d(-50%, 0, 0) rotate(${(this.hour * 30) + (this.minute * 0.5) + (this.second * (0.5 / 60))}deg)` };
    
    this.minuteHandStyle = { transform: `translate3d(-50%, 0, 0) rotate(${(this.minute * 6) + (this.second * 0.1)}deg)` };
    
    this.secondHandStyle = { transform: `translate3d(-50%, 0, 0) rotate(${this.second * 6}deg)` };
  }

  getTime() {
    return setInterval(() => {
      this.date = new Date();
      this.hour = this.date.getHours();
      this.minute = this.date.getMinutes();
      this.second = this.date.getSeconds();

      this.animateAnalogClock();
    }, 1000);
  }

  format(num: number) {
    return (num + '').length === 1 ? '0' + num : num + '';
  }

  setTime()
  {
    let inputValue = (<HTMLInputElement>document.getElementById("appt")).value;
   console.log(inputValue);
   this.hh1= inputValue.substr(0,2);
   this.mm1 = inputValue.substr(3,2);
   this.ss1 = inputValue.substr(6,2);
   this.hour = + this.hh1;
   this.minute= + this.mm1;
   this.second= + this.ss1;
  }

  Sync() {

     this.setTime();
      this.animateAnalogClock();
      
  }
}

Answer 1

Я следил за решением по следующей ссылке, и оно сработало для меня.

Как создать Javascript часы с настраиваемым временем ввода?