计时器倒计时Angular 2答案

【问题标题】：Timer countdown Angular 2计时器倒计时Angular 2
【发布时间】：2017-09-20 07:50:12
【问题描述】：

我正在尝试为我的 Ionic2 应用程序制作倒数计时器，问题是我从现在开始使用此方法countdown timer 但现在我必须创建倒计时，例如 30:00 分钟，有什么更好的方法做吗？时间可能会改变，如果我想在倒计时完成时触发某些东西，我只需要比较 time 是否为 0，对吗？

【问题讨论】：

标签： javascript angular typescript timer countdown

【解决方案1】：

您可以“监听”计时器并在倒计时为 0 时触发操作。要显示计时器，请使用管道。

HTML

{{counter | formatTime}}

TypeScript

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

管道

//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);
  }

DEMO

//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);
}

DEMO

如果您想使用服务：

服务

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

组件

  countDown;
  counter=1800 ;
  tick=1000;

  constructor(private myService: MyService) {
  }

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

  }

  ngOnDestroy(){
    this.countDown=null;
  }

管道

  ...  
  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);

  }

DEMO

【讨论】：

这与我链接的答案的代码相同，对吗？如果我想要 30:00 这个我做不到怎么办
另外我可以把它放在服务上，然后同步到我的页面？
如果你把它放在服务中，订阅这个
这就是我最终这样做的方式，完美的男人，你很好！感谢您的努力！
非常感谢这个解决方案！这正是我正在寻找的东西。但是你能在地图功能的帖子中删除多余的“}”吗？我花了很多时间来弄清楚我犯的错误。 @维加

【解决方案2】：

试试这个计时器：

<h5><span id="time" class="text-primary">00:00</span></h5>

component.ts

import { Component, OnInit, ElementRef, AfterViewInit } from '@angular/core';
import { Observable } from 'rxjs/Rx';

export class AppComponent implements OnInit {

    constructor(private elementRef: ElementRef) { }

    ngOnInit() {
        var callDuration = this.elementRef.nativeElement.querySelector('#time');
        this.startTimer(callDuration);
    }

    startTimer(display) {
        var timer = 1800;
        var minutes;
        var seconds;

        Observable.interval(1000).subscribe(x => {
            minutes = Math.floor(timer / 60);
            seconds = Math.floor(timer % 60);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            display.textContent = minutes + ":" + seconds;

            --timer;
            if (timer < 0) {
                 console.log('timer is ended');
            }
        })
    }
}

【讨论】：

我将测试这个答案，以检查什么更有效，谢谢@Chandru，顺便说一下，如果我有一个 api 调用而不是“计时器”，它会返回这个：剩余时间：1244.529 与您的选择有可能吗？
是的，可以使用此代码.. 设置剩余时间：1244.529 而不是 'timer' 然后计时器从 20.44 开始
如果我在服务上有这个，它可以更新视图吗？我的意思是倒计时正在运行，但如果我进行 api 调用并返回不同的剩余时间，我必须更新它，有可能吗？
如果您想帮助我解决这个问题，请点击此question
chandru 与您的回答我可以在服务中获得可观察的内容，并从页面获取价值？我的意思是服务有可观察的并且在页面上我有“计时器”（在你的代码中）？

【解决方案3】：

maxtime: any=30

  StartTimer(){
    this.timer = setTimeout(x => 
      {
          if(this.maxTime <= 0) { }
          this.maxTime -= 1;

          if(this.maxTime>0){
            this.hidevalue = false;
            this.StartTimer();
          }

          else{
              this.hidevalue = true;
          }

      }, 1000);


  }

【讨论】：