Я хочу сделать таймер на angular - PullRequest
Новая
       27

Я хочу сделать таймер на angular

0 голосов
/ 27 января 2020

Я хочу настроить таймер на angular. Он должен быть похож на секундомер, и я также могу приостановить возобновление остановки, запустить его, и с того времени, с которого будет запускаться указанный таймер.

Я использовал <countup-timer>, но он не работает должным образом, он не запускается с даты / время, которое я указал.

пожалуйста, помогите мне

https://www.npmjs.com/package/ngx-timer Я использую эту демонстрацию, но она не работает, как мне нужно

1 Ответ

0 голосов
/ 27 января 2020

Библиотека работает нормально, вот пример В

компонент приложения. 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

...