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

Question

我正在使用google的地方api,getPlacePredictions,这是我的输入keyup事件的代码:

我的模板:搜索...

我的课 :

       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 observable中,以便我可以利用订阅此函数？

我最终要做的是创建一个可见和不可见的加载图标,但我无法使用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;
});