Angular 一旦我将组件保留为角度，停止调用连续函数

我正在使用Angular构建一个应用程序。作为其中的一部分，我每1分钟为连续数据进行一次API调用。我的代码看起来像

ngOnInit() {
    this.getRealTimeData();
  }

  intervalId : any

  getRealTimeData() {
    this.getChillerApiData()
    clearInterval(this.intervalId);
    this.intervalId = setInterval(() => {
      this.getChillerApiData();
    }, 1000);
  }

  getChillerApiData() {
    this.api.getFirstChillerData()
      .subscribe((first_data:any) => {
        this.first_api_data = first_data;
        console.log(this.first_api_data)
        this.putPrimaryPumpData();
      });
  }

---

我每1分钟或我提到的任何时间间隔都会得到数据。但是，当我离开该组件并转到另一个组件时，仍然可以看到在指定的时间间隔内定期进行的API调用（我可以看到控制台日志）。我如何阻止这种情况发生？我的意思是，一旦我离开这个组件，API调用也应该停止

首先，这里有很多错误

你呼叫订阅，但它不是取消订阅。您想要取消订阅，并且想要清除间隔。如果未清除订阅，它将继续获取信息并不断重复。因此，每次启动订阅时都会调用putPrimaryPumpData。可以在多次同时运行中得出结论

做一些类似于：

let sub = this.api.getFirstChillerData()
  .subscribe((first_data:any) => {
    sub.unsubscribe();
    this.first_api_data = first_data;
    console.log(this.first_api_data)
    this.putPrimaryPumpData();
  });

现在，这不会创建1000个循环中的100个。 其次，您可以使用Ngondestory，如：

ngOnDestroy() {
  clearInterval(this.intervalId);
}

---

首先，这里有很多错误

你呼叫订阅，但它不是取消订阅。您想要取消订阅，并且想要清除间隔。如果未清除订阅，它将继续获取信息并不断重复。因此，每次启动订阅时都会调用putPrimaryPumpData。可以在多次同时运行中得出结论

做一些类似于：

let sub = this.api.getFirstChillerData()
  .subscribe((first_data:any) => {
    sub.unsubscribe();
    this.first_api_data = first_data;
    console.log(this.first_api_data)
    this.putPrimaryPumpData();
  });

现在，这不会创建1000个循环中的100个。 其次，您可以使用Ngondestory，如：

ngOnDestroy() {
  clearInterval(this.intervalId);
}

---

对于这种情况，angular提供OnDestroy生命周期事件。 您可以挂接此事件以清除间隔

像这样：

intervalId : any

ngOnDestory() {
 clearInterval(this.intervalId);
}

---

对于这种情况，angular提供OnDestroy生命周期事件。 您可以挂接此事件以清除间隔

像这样：

intervalId : any

ngOnDestory() {
 clearInterval(this.intervalId);
}

使用生命周期挂钩

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

export class AppComponent implements OnInit, OnDestroy {
  private intervalId: any
  private chillerDataSubscription: Subscription;

  constructor() { }

  ngOnInit() {
    this.getRealTimeData();
  }

  getRealTimeData() {
    this.getChillerApiData()
    clearInterval(this.intervalId);
    this.intervalId = setInterval(() => {
      this.getChillerApiData();
    }, 1000);
  }

  getChillerApiData() {
    if (this.chillerDataSubscription) {
      this.chillerDataSubscription.unsubscribe();
    }
    this.chillerDataSubscription = this.api.getFirstChillerData()
      .subscribe((first_data:any) => {
        this.first_api_data = first_data;
        console.log(this.first_api_data)
        this.putPrimaryPumpData();
      });
  }

  ngOnDestroy() {
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
    if (this.chillerDataSubscription) {
      this.chillerDataSubscription.unsubscribe();
    }
  }
}

有关生命周期挂钩的更多详细信息，请参阅

我假设您正在api服务中发出HTTP请求。在这种情况下，请注意getColumerApidata（）函数中的

ColumerDataSubscription

。它确保在发出新请求之前取消订阅任何未完成的请求。它可以防止累积太多的请求。

使用生命周期挂钩

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

export class AppComponent implements OnInit, OnDestroy {
  private intervalId: any
  private chillerDataSubscription: Subscription;

  constructor() { }

  ngOnInit() {
    this.getRealTimeData();
  }

  getRealTimeData() {
    this.getChillerApiData()
    clearInterval(this.intervalId);
    this.intervalId = setInterval(() => {
      this.getChillerApiData();
    }, 1000);
  }

  getChillerApiData() {
    if (this.chillerDataSubscription) {
      this.chillerDataSubscription.unsubscribe();
    }
    this.chillerDataSubscription = this.api.getFirstChillerData()
      .subscribe((first_data:any) => {
        this.first_api_data = first_data;
        console.log(this.first_api_data)
        this.putPrimaryPumpData();
      });
  }

  ngOnDestroy() {
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
    if (this.chillerDataSubscription) {
      this.chillerDataSubscription.unsubscribe();
    }
  }
}

有关生命周期挂钩的更多详细信息，请参阅

---

我假设您正在api服务中发出HTTP请求。在这种情况下，请注意getColumerApidata（）函数中的

ColumerDataSubscription

。它确保在发出新请求之前取消订阅任何未完成的请求。它可以防止累积太多的请求。

您可以在

ngondestory

中清除组件。当组件从DOM中移除时，Angular调用此函数

您可以在

ngondestory

中清除间隔，但在您的情况下，最好在RxJS中执行间隔，您现有的调用可以是其中的一部分

//此处的其他导入
从'rxjs'导入{interval}；
从'rxjs/operators'导入{takeUntil，switchMap}；
//@Component decorator在这里
导出类MyComponent实现OnInit、OnDestroy{
//TODO:添加构造函数
私有已销毁：主题=新主题（）；
恩戈尼尼特（）{
//每1000ms创建一个rxjs间隔
//或者您可以使用计时器（0，1000）立即启动
间隔（1000）。管道(
//每当调用this.destromed时停止间隔
takeUntil（这个被摧毁了），
//现在发出api请求
switchMap（（）=>this.api.getFirstData（））
).订阅（数据=>{
this.first_api_data=数据；
这个.putPrimaryPumpData（）；
});
}
恩贡德斯特罗（）{
//从DOM中删除组件时调用。
//取消休息时间，整理一下
这个。销毁。下一个（）；
这个。销毁。完成（）；
}
}

您可以在

ngondestory

中清除组件。当组件从DOM中移除时，Angular调用此函数

您可以在

ngondestory

中清除间隔，但在您的情况下，最好在RxJS中执行间隔，您现有的调用可以是其中的一部分

//此处的其他导入
从'rxjs'导入{interval}；
从'rxjs/operators'导入{takeUntil，switchMap}；
//@Component decorator在这里
导出类MyComponent实现OnInit、OnDestroy{
//TODO:添加构造函数
私有已销毁：主题=新主题（）；
恩戈尼尼特（）{
//每1000ms创建一个rxjs间隔
//或者您可以使用计时器（0，1000）立即启动
间隔（1000）。管道(
//每当调用this.destromed时停止间隔
takeUntil（这个被摧毁了），
//现在发出api请求
switchMap（（）=>this.api.getFirstData（））
).订阅（数据=>{
this.first_api_data=数据；
这个.putPrimaryPumpData（）；
});
}
恩贡德斯特罗（）{
//从DOM中删除组件时调用。
//取消休息时间，整理一下
这个。销毁。下一个（）；
这个。销毁。完成（）；
}
}

您存储了间隔ID，因此您是否尝试使用该ID清除它（请参阅）？您还可以使用RxJS的计时器“本地”设置间隔。您需要在ngOnDestroy（）钩子中清除间隔。如何在ngOnDestroy（）中销毁/清除间隔？您存储了间隔ID，因此您是否尝试使用它来清除它（请参阅）？您还可以使用RxJS的计时器“本地”设置间隔。您需要在ngondstroy（）钩子中清除间隔。如何在ngondstroy（）中销毁/清除间隔？