Angular 角度2-倒计时计时器

我愿意在Angular 2中做一个从60开始的倒计时（即59、58、57等）

为此，我有以下几点：

constructor(){
  Observable.timer(0,1000).subscribe(timer=>{
  this.counter = timer;
});
}

上面，每秒滴答滴答，这很好；然而，它是以升序的方式到达一个无限的数字。

---

我不确定是否有办法调整它，这样我就可以有一个倒计时计时器。

有很多方法可以实现这一点，一个基本的例子是使用

take

操作符

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

@Component({
   selector: 'my-app',
   template: `<h2>{{counter$ | async}}</h2>`
})
export class App {
   counter$: Observable<number>;
   count = 60;

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

从“rxjs”导入{Observable，timer}；
从“rxjs/operators”导入{take，map}；
@组成部分({
选择器：“我的应用程序”，
模板：`{counter$| async}}`
})
导出类应用程序{
计数器$：可观察的；
计数=60；
构造函数（）{
此.counter$=计时器（01000）.pipe(
拿（这个，伯爵），
映射（（）=>--此.count）
);
}
}

更好的方法是创建一个反指令！

import{Directive，Input，Output，EventEmitter，OnChanges，OnDestroy}来自“@angular/core”；
从“rxjs”导入{Subject，observatable，Subscription，timer}；
从“rxjs/operators”导入{switchMap，take，tap}；
@指示({
选择器：“[计数器]”
})
导出类反指令实现OnChanges、OnDestroy{
private _counterSource$=新主题导入组件：

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";

功能倒计时：

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:

<div class="panel panel-default">
  <div class="panel-heading">
    <h2 class="panel-title">Countdown timer</h2>
  </div>
  <div class="panel-body">
    <div>
      <label>value: </label> {{countdown}}
    </div>
    <div>
      <button (click)="startCountdownTimer()" class="btn btn-success">Start</button>
    </div>
  </div>
</div>


倒数计时器
值：{{倒计时}
开始
从合成的可观察对象中改变外部状态很少是个好主意，在这里它是不必要的。另一种选择：
可观察的.timer（0，1000）.map（value=>60-value）.takeWhile（value=>value>0）
@cartant这不是一个状态。这只是一个倒计时。当计数器达到0时，它将重新计数到10。我的意思是在我的in显示器中。我用来显示数字10，并开始倒计时到9、8、7、6、5、4……等等，直到它达到0。当计数器达到0时，它将再次开始倒计时到10。@JydonM啊，有一个
repeat（）
可以在链末尾使用的运算符感谢这位男士，我在代码末尾添加了它，但它仍然是负值。你能提供它的工作示例吗？我似乎很难弄清楚。顺便说一下，我只是角度和类型脚本方面的新手：）如何停止计时器？@Asif通过取消订阅“stream$”可观察到。
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);
  }

<div class="panel panel-default">
  <div class="panel-heading">
    <h2 class="panel-title">Countdown timer</h2>
  </div>
  <div class="panel-body">
    <div>
      <label>value: </label> {{countdown}}
    </div>
    <div>
      <button (click)="startCountdownTimer()" class="btn btn-success">Start</button>
    </div>
  </div>
</div>