Angular2 Observable - 如何包装第三方 ajax 调用

Question

我正在使用 Google 的地点 API - getPlacePredictions。

这是我在输入按键事件中的代码:

我的模板:

<input type="text" (keyup)='search()'>
<div *ngIf="searching">Searching ... </div>

我的类(class):

private autocomplete;

ngAfterViewInit () {
    this.autocomplete = new google.maps.places.AutocompleteService();
}

search(){
    this.searching = true;
    this
    .autocomplete
    .getPlacePredictions( option , ( places , m )=> {
        console.log( 'onPrediction' , places ); 
        this.searching = false;
    } ); 
}

是否有任何可行的方法将 getPlacePredictions 包装在 rxjs 可观察对象中，以便我可以利用订阅此函数？

我最终想在这里做的是创建一个可见和不可见的加载图标，但我无法使用 google 的 api 本身正确地实现它，我想如果我可以将它包装在一个 Observable 中，它会变成很简单。

Answer 1

您可以通过这种方式将对 getPlacePredictions 方法的调用包装在原始可观察对象中:

search(option) {
  return Observable.create((observer) => {
    this.autocomplete
      .getPlacePredictions( option , ( places , m )=> {
        observer.next(places);
      }); 
  });
}

然后您就可以订阅它了:

this.searching = true;
this.search(option).subscribe(places => {
  this.searching = false;
  this.places = places;
});

从以后的 Angular 版本开始 https://stackoverflow.com/a/55539146/13889515

使用:

return new Observable((observer) => {
  this.autocomplete
    .getPlacePredictions( option , ( places , m )=> {
       observer.next(places);
     }); 
  });
}