Temporizador de cuenta regresiva Angular 2

Por fin después de mucho luchar hemos encontrado la respuesta de este rompecabezas que tantos usuarios de esta web han presentado. Si tienes algún dato que aportar puedes compartir tu comentario.

Solución:

Puede ‘escuchar’ el temporizador y activar la acción cuando la cuenta regresiva sea 0. Y para mostrar el temporizador, use una tubería.

HTML

counter     

Mecanografiado

  countDown:Subscription;
  counter = 1800;
  tick = 1000;
  ngOnInit() 
    this.countDown = timer(0, this.tick)
      .subscribe(() => --this.counter)
  
  ngOnDestroy()
    this.countDown=null;
  

Tubo

//for MM:SS format
  transform(value: number): string 
    const minutes: number = Math.floor(value / 60);
    return ('00' + minutes).slice(-2) + ':' + ('00' + Math.floor(value - minutes * 60)).slice(-2);
  

MANIFESTACIÓN

//for HH:MM:SS format

transform(value: number): string 
    const hours: number = Math.floor(value / 3600);
    const minutes: number = Math.floor((value % 3600) / 60);
    return ('00' + hours).slice(-2) + ':' + ('00' + minutes).slice(-2) + ':' + ('00' + Math.floor(value - minutes * 60)).slice(-2);

MANIFESTACIÓN

---

Si desea utilizar un servicio:

Servicio

 ...
  getCounter(tick) 
    return timer(0, tick) 
  
 ...

Componente

  countDown;
  counter=1800 ;
  tick=1000;

  constructor(private myService: MyService) 
  

  ngOnInit() 
    this.countDown = this.myService.getCounter(this.tick).subscribe(() => this.counter--);

  

  ngOnDestroy()
    this.countDown=null;
  

Tubo

  ...  
  transform(value: number): string 
    //MM:SS format
    const minutes: number = Math.floor(value / 60);
    return ('00' + minutes).slice(-2) + ':' + ('00' + Math.floor(value - minutes * 60)).slice(-2);

    // for HH:MM:SS
    //const hours: number = Math.floor(value / 3600);
    //const minutes: number = Math.floor((value % 3600) / 60);
    //return ('00' + hours).slice(-2) + ':' + ('00' + minutes).slice(-2) + ':' + ('00' + Math.floor(value - minutes * 60)).slice(-2);

  

MANIFESTACIÓN

Eres capaz de añadir valor a nuestro contenido aportando tu experiencia en los comentarios.

---

---

Utiliza Nuestro Buscador