我想让计时器补角

Question

我想为角度设置计时器。它应该像秒表，并且Ii可以暂停，恢复，停止，启动它以及从指定的计时器开始计时。

我用过<countup-timer>，但是它不能正常工作，它不是从我指定的日期/时间开始的。

请帮助我

https://www.npmjs.com/package/ngx-timer我正在使用此演示，但无法正常使用]

Answer 1

这里的图书馆工作很好，在

app component.html

<h3>2. Countdown Timer</h3>
<countdown-timer [countDownTimerConfig]="testConfig"></countdown-timer>
<br>

<button (click)="startTimerGT()">Start with a given time</button>
<button (click)="pauseTimer()">pause</button>
<button (click)="resumeTimer()">Resume</button>
<button (click)="stopTimer()">Stop</button>

在app.component.ts中

import { Component } from '@angular/core';
import {CountdownTimerService } from 'ngx-timer'

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

  constructor(private countdownTimerService: CountdownTimerService){

  }
  name = 'Angular';
   startTimerGT  = ()=>{
    this.stopTimer();
    let cdate = new Date();   // desired date
    cdate.setHours(cdate.getHours() +  1);
    cdate.setSeconds(cdate.getSeconds() +  5);
    this.countdownTimerService.startTimer(cdate);
  }


   stopTimer = () =>{
    this.countdownTimerService.stopTimer();
  }

  resumeTimer = () =>{
    this.countdownTimerService.resumeTimer();
  }
   pauseTimer = () =>{
    this.countdownTimerService.pauseTimer();
  }
}

app.module.ts

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { NgxTimerModule } from 'ngx-timer';

@NgModule({
  imports:      [ BrowserModule, FormsModule ,NgxTimerModule],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

示例工作代码也在这里https://stackblitz.com/edit/angular-vzygxv