Angular 在9中每x分钟进行一次http请求调用

我正在尝试创建一个动态组件，它将以api url和间隔时间（比如“x”分钟）作为输入，并每隔x分钟获取作为输入传递的数据

这是我的stackblitz，我尝试了跟踪所有stackoverflow的答案

我需要在0秒时第一次显示数据，然后每隔x秒或分钟获取一次数据。这看起来对吗？或者我在这里遗漏了什么

---

有几件事我会改变：

• 如果使用角度>=4.3.1，请使用新的HttpClient
• 您应该在Ngondestory中取消订阅，以免泄露订阅
• 将interval更改为timer，初始时间为0，以便立即进行第一次呼叫
• 将订阅移动到ngOnInit，否则在设置intervalPeriod之前会创建susbcription，并导致间隔的默认期间为0
• catchError，如果您希望在一次呼叫失败时间隔保持活动状态
• 将flatMap更改为switchMap，使其最多有一个http调用，没有重叠调用。如果第一次呼叫未完成，则在执行第二次呼叫时，将使用switchMap取消该呼叫。间隔1分钟不太可能出现这种情况，因此没有必要

从“@angular/core”导入{Component，Input，onestroy，OnInit，Output}；
从'@angular/common/http'导入{HttpClient}；
从“rxjs”导入{of，Subscription，timer}；
从“rxjs/operators”导入{catchError，filter，switchMap}；
@组成部分({
选择器：“应用程序数据发射器”，
templateUrl:“./data emitter.component.html”，
样式URL:[“/data-emitter.component.css”]
})
导出类DataEmitterComponent实现OnInit、OnDestroy{
@Output（）数据：任意；
@Input（）apiUrl:任意；
@Input（）间隔期：数字；
分钟：数字；
认购：认购；
构造函数（私有http:HttpClient）{}
恩戈尼尼特（）{
this.minutes=this.intervalPeriod*60*1000；
this.subscription=计时器（0，this.minutes）
.烟斗(
开关映射（（）=>{
返回此参数。getData（）
.pipe（catchError（err=>{
//处理错误
控制台错误（err）；
返回（未定义）；
}));
}),
过滤器（数据=>数据！==未定义）
)
.订阅（数据=>{
这个数据=数据；
console.log（this.data）；
});
}
恩贡德斯特罗（）{
this.subscription.unsubscripte（）；
}
getData（）{
返回此文件。http
.get（this.apirl）；
}
}

这是一个

import { Component, Input, OnInit, Output } from "@angular/core";
import { interval } from "rxjs";
import { flatMap, map } from "rxjs/operators";
import { Http } from "@angular/http";

@Component({
  selector: "app-data-emitter",
  templateUrl: "./data-emitter.component.html",
  styleUrls: ["./data-emitter.component.css"]
})
export class DataEmitterComponent implements OnInit {
  @Output() data: any;
  @Input() apiUrl: any;
  @Input() intervalPeriod: number;

  minutes: number;

  constructor(private http: Http) {}
  ngOnInit() {
    this.minutes = this.intervalPeriod * 60 * 1000;
  }

  subscribes$ = interval(this.minutes)
    .pipe(flatMap(() => this.getData()))
    //this.getData()
    .subscribe(data => {
      this.data = data;
      console.log(this.data);
    });

  getData() {
    return this.http
      .get(this.apiUrl)
      .pipe(map((response: any) => response.json()));
  }
}