如何在angular2中创建定时器

Question

我在 Angular 2 中需要一个计时器，它会在一个时间间隔后滴答作响并执行一些任务（可能会调用一些函数）。

如何使用 Angular 2 做到这一点？

原文由 kuntal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

除了之前的所有答案之外，我还会使用 RxJS Observables 来完成

请检查 Observable.timer

这是一个示例代码，将在 2 秒后开始，然后每秒滴答作响：

 import {Component} from 'angular2/core';
import {Observable} from 'rxjs/Rx';

@Component({
    selector: 'my-app',
    template: 'Ticks (every second) : {{ticks}}'
})
export class AppComponent {
  ticks =0;
  ngOnInit(){
    let timer = Observable.timer(2000,1000);
    timer.subscribe(t=>this.ticks = t);
  }
}

这是一个工作的 plunker

更新 如果你想调用在 AppComponent 类上声明的函数，你可以执行以下操作之一：

\*\* 假设你要调用的函数名为 func ，

 ngOnInit(){
    let timer = Observable.timer(2000,1000);
    timer.subscribe(this.func);
}

上述方法的问题在于，如果您在 func 中调用“this”，它将引用订阅者对象而不是 AppComponent 对象，这可能不是您想要的。

但是，在下面的方法中，您创建了一个 lambda 表达式并在其中调用函数 func 。这样，对 func 的调用仍然在 AppComponent 的范围内。我认为这是最好的方法。

 ngOnInit(){
    let timer = Observable.timer(2000,1000);
    timer.subscribe(t=> {
        this.func(t);
    });
}

检查 这个 plunker 的工作代码。

原文由 Abdulrahman Alsoghayer 发布，翻译遵循 CC BY-SA 3.0 许可协议