Angular 2 – Temporizador de cuenta regresiva

Este team especializado pasados muchos días de trabajo y de recopilar de información, dimos con la solución, esperamos que te sea útil para tu proyecto.

Solución:

Hay muchas maneras de lograr esto, un ejemplo básico es usar el take operador

import  Observable, timer  from 'rxjs';
import  take, map  from 'rxjs/operators';

@Component(
   selector: 'my-app',
   template: `
 async
`
)
export class App 
   counter$: Observable;
   count = 60;

   constructor() 
     this.counter$ = timer(0,1000).pipe(
       take(this.count),
       map(() => --this.count)
     );
   

¡Una mejor manera es crear una contradirectiva!

import  Directive, Input, Output, EventEmitter, OnChanges, OnDestroy  from '@angular/core';

import  Subject, Observable, Subscription, timer  from 'rxjs';
import  switchMap, take, tap  from 'rxjs/operators';

@Directive(
  selector: '[counter]'
)
export class CounterDirective implements OnChanges, OnDestroy 

  private _counterSource$ = new Subject();
  private _subscription = Subscription.EMPTY;

  @Input() counter: number;
  @Input() interval: number;
  @Output() value = new EventEmitter();

  constructor() 

    this._subscription = this._counterSource$.pipe(
      switchMap(( interval, count ) =>
        timer(0, interval).pipe(
          take(count),
          tap(() => this.value.emit(--count))
        )
      )
    ).subscribe();
  

  ngOnChanges() 
    this._counterSource$.next( count: this.counter, interval: this.interval );
  

  ngOnDestroy() 
    this._subscription.unsubscribe();
  

Uso:

    count  

Aquí hay un stackblitz en vivo

Importar en componente:

import  Observable  from "rxjs/Observable";
import "rxjs/add/observable/timer";
import "rxjs/add/operator/finally";
import "rxjs/add/operator/takeUntil";
import "rxjs/add/operator/map";

Función de cuenta regresiva:

countdown: number;
 startCountdownTimer() 
    const interval = 1000;
    const duration = 10 * 1000;
    const stream$ = Observable.timer(0, interval)
      .finally(() => console.log("All done!"))
      .takeUntil(Observable.timer(duration + interval))
      .map(value => duration - value * interval);
    stream$.subscribe(value => this.countdown = value);
  

html:

  

    
Countdown timer
  
  

    

      value:  countdown
    
    

      Start
    
  

valoraciones y reseñas

Más adelante puedes encontrar las aclaraciones de otros programadores, tú igualmente tienes la habilidad insertar el tuyo si te apetece.

---

---

Utiliza Nuestro Buscador