Question

我希望在我的服务中拥有一个属性currentAndLastVehicles，该属性将每秒自动更改。

到目前为止：

import { Injectable } from '@angular/core';

@Injectable()
export class SharedDataService {

  constructor() {
    setTimeout(() => {
      console.log("hello");
      this.currentAndLastVehicles = [(Math.floor(Math.random() * (1000000 - 9999999)) + 9999999).toString(),...this.currentAndLastVehicles];
    }, 1000);
  }

  public currentAndLastVehicles : string[] = [];
}

问题：

setTimeout只会被执行一次（很可能是因为setTimeout位于构造函数中）
setTimeout在构造函数之外导致多个错误

我可以做些什么来达到理想的行为？

Answer 1

使用setInterval。

在调用clearInterval之前，它将被执行。您可以通过在服务中创建方法并执行AppComponent的clearInterval来调用ngOnDestroy

在构造函数中，您应该使用变量

constructor(){
     this.clearIntervalInstance = this.myFunction();
}

您应该将服务中的功能作为

myFunction() {
   setInterval(()=>{
      this.currentAndLastVehicles = [(Math.floor(Math.random() * (1000000 - 9999999)) + 9999999).toString(),...this.currentAndLastVehicles];
},10000)

在app组件中

ngOnDestroy() {
  this.service.clearIntervalMethod()
}

在您的服务中

clearIntervalMethod(){
  clearInterval(this.clearIntervalInstance);
}

Answer 2

setTimeout只会运行一次，如果你想要每一秒都必须使用setInterval功能。

Answer 3

如果您希望每秒重新加载数据，可以使用这样的反应方式。

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/interval';

@Injectable()
export class SharedDataService {
  poll$: Observable<any>;

  constructor() {
    this.poll$.interval(1000).subscribe(() => {
      return this.currentAndLastVehicles = [(Math.floor(Math.random() * (1000000 - 9999999)) + 9999999).toString(),...this.currentAndLastVehicles];
    }
  }

  public currentAndLastVehicles : string[] = [];
}

Answer 4

要运行函数EVERY X秒，直到它被取消，请使用setInterval

setInterval(() => {
      console.log("hello");
      this.currentAndLastVehicles = [(Math.floor(Math.random() * (1000000 - 9999999)) + 9999999).toString(),...this.currentAndLastVehicles];
    }, 1000);
 }

请注意，您可能希望存储setInterval返回的值，以便在需要时取消它。

Angular 5服务中的SetTimeout

4 个答案: