来自ngOnInit中的服务的Angular 4轮询/流数据答案

【问题标题】：Angular 4 Poll / Stream Data from service within ngOnInit来自ngOnInit中的服务的Angular 4轮询/流数据
【发布时间】：2017-10-31 07:54:31
【问题描述】：

我想使用 AngularJS 4 从 API 流式传输数据。当我第一次调用 API 时没有数据，但最终会在 15 - 30 秒内返回更多结果。

这是我的组件：

export class ResultsComponent implements OnInit {
    results: Results;

    constructor(
        private searchService: SearchService,
        private route: ActivatedRoute
    ) {}

    ngOnInit(): void {

        this.route.params
            .switchMap((params: Params) => 
        this.searchService.getResultsObservable(params['searchKey']))
            .subscribe(data => { this.results = data; });
}

这是我的服务调用：

我正在使用上面的 Observable 调用，但我也包含了 Promise 调用。

getResults(searchKey: string): Promise<Results> {
    const url = `${this.apiUrl}/${searchKey}/0`;
    return this.http.get(url)
            .toPromise()
            .then(response => response.json() || {})
            .catch(this.handleError);
}

getResultsObservable(searchKey: string): Observable<Results> {
    const url = `${this.apiUrl}/${searchKey}/0`;
    return this.http
            .get(url)
            .map(response => response.json() || {});
}

我认为我需要使用 Observable 调用，但我不确定我需要如何处理组件内的调用。

【问题讨论】：

AngularJS 和 Angular 4 是两个不同的框架。你在这里使用的是Angular 4。您可能想要编辑您的问题并将AngularJS 替换为Angular.
@mridula 谢谢！我已经更新了问题。
您遇到的具体问题是什么？从阅读您的问题中我真的无法判断:(。您从组件中观察到的调用处理看起来不错。
@Nehal 我不确定如何将我的 SearchKey 作为参数传递，然后将结果流回我的视图。目前，我只在 ngOnInit() 期间调用该服务一次，我应该以不同的方式执行此操作吗？我的组件如何知道继续检查更多数据？

标签： angular angular2-observables ngoninit

【解决方案1】：

如果我正确理解您的问题，您必须在特定时间间隔（例如 15 秒）后继续从服务器获取数据，您可以试试这个：

private keepGettingDataFromServer() {
    this.intervalLoop = setInterval (() => {
            this.getResultsObservable.subscribe(res => {
                //handle the response here
            })
        }
    }, 1500)
}

getResultsObservable(searchKey: string): Observable<Results> {
    const url = `${this.apiUrl}/${searchKey}/0`;
    return this.http
        .get(url)
        .map(response => response.json() || {});
}

ngOnDestroy() {
    if (this.intervalLoop) {
        clearInterval(this.intervalLoop);
    }
}

我也可以想到另外一种方式，如果你的服务器是ASP .NET，你可以使用SignalR订阅频道，收到预期的数据时收到通知。

【讨论】：

感谢 @mridula 让我走上正轨！

【解决方案2】：

感谢@mridula 让我走上正轨。经过一番研究，我发现最好的解决方案是使用 IntervalObservable：

subscription: Subscription;

ngOnInit() {
    this.route.params.subscribe(
      (params: Params) => {
        this.subscription = this.getResults((params['searchKey'])).subscribe(
          (response) => {
            console.log(response);
            //your business logic for each loop
            //once your are done
            this.stopInterval();
        }
      }
    );
  }
);

getResults(searchKey: string): {
      return IntervalObservable
      .create(1000) //1 second interval
      .flatMap(() => {
      return this.http.get('[API_URL]/' + searchKey).map(response => response.json());
  });
}

stopInterval(){
    this.subscription.unsubscribe();
}

【讨论】：