Angular 5 - 相当于 AngularJS 的 $interval答案

【问题标题】：Angular 5 - equivalent to $interval from AngularJSAngular 5 - 相当于 AngularJS 的 $interval
【发布时间】：2018-04-30 08:30:40
【问题描述】：

我正在尝试从 AngularJS 到 Angular 5 中找到与 $interval 等效的内容。

$interval 将重复一个函数调用或一个块指定的次数，其间有延迟。这就是我想做的，用 AngularJS 写的：

$interval(function() {
      myFunction(param1, param2)
      i++;
    }, delay, count);

抽象i，我将它用于不同的目的。这如何在 Angular 5 中实现？我已经尝试过使用 rxjs/Observable，但我似乎无法找到一种方法来同时包含延迟和多次运行部分。

谢谢。

【问题讨论】：

github.com/angular/angular/issues/6539

标签： angular rxjs observable delay repeat

【解决方案1】：

您可以使用timer 静态方法和take 运算符。

import {timer} from 'rxjs';
import {take} from 'rxjs/operators';  

timer(yourDelay, 1000).pipe(
   take(yourCount)).subscribe(x=>{
    // do here whatever you want to do here
    })

我假设你使用的是 RxJS 6。

【讨论】：

是的，我使用的是 RxJS 6。但我没有 Observable。我应该使用 Observable.create() 创建一个新的吗？或者我应该有一个现有的来使用这种方法？
如果你没有 observable，你可以使用 timer 静态方法（它会为你创建一个 observable）。检查更新的答案。
使用计时器后，这给出了预期的结果。感谢您的解决方案和解释。
伟大而简单的解决方案！

【解决方案2】：

您可以使用interval 和take 来控制要调用函数的次数。

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';

const delay = 1000; // every 1 sec
const count = 5; // process it 5 times

Observable.interval(delay).take(count).subscribe(() => {
  myFunction(param1, param2);
});

【讨论】：

这让我在构建时返回“Observable 类型上不存在属性间隔”。我认为这是由 RxJS 的版本引起的。我正在使用 RxJS 6。
@BogdanPuşcaşu 它应该仍然适用于 v6，我已经更新了答案，请尝试添加 import 'rxjs/add/observable/interval';

【解决方案3】：

你可以使用 rxjs 的区间

import { interval } from 'rxjs/observable/interval';

//emit value in sequence every 1 second
const source = interval(1000);
//output: 0,1,2,3,4,5....
const subscribe = source.subscribe(val => console.log(val));

这将在每 1 秒后发出新值

【讨论】：

【解决方案4】：

您可以参考this教程进行查询。它在 Angular 5 中也能正常工作。我试过了，这里给出了简单的方法。

import { Observable } from “rxjs”;

import { IntervalObservable } from “rxjs/observable/IntervalObservable”;

import { TimerObservable } from “rxjs/observable/TimerObservable”;

import “rxjs/add/operator/takeWhile”;

Declare variable in class
export class MyComponent implements OnInit { 

private alive: boolean; 

}

In ngOnInit() function use below code to call service after particular interval of time
ngOnInit() {

IntervalObservable.create(10000)  .takeWhile(() => this.alive) 
// only fires when component is alive  

.subscribe(() => { this.yourService.getDataList()   
.subscribe(data => { this.agentData = data.json().result; console.log(this.agentData);   });
 });
}

【讨论】：