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

Question

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

这是我的 input keyup 事件的代码：

我的模板：

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

我的班级：

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 可观察对象中，以便我可以利用订阅此函数的优势？

我最终在这里要做的是创建一个可见和不可见的加载图标，但我无法用谷歌的 api 本身正确地做到这一点，我想如果我可以将它包装在一个 Observable 中，它会变成容易。

Answer 1

您可以通过这种方式将对 getPlacePredictions 方法的调用封装在原始 observable 中：

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);
     }); 
  });
}

Answer 2

您可以在包装第 3 方 ajax 调用的 Angular 服务中创建一个 RxJS 主题。例如：

@Injectable()
export class PredictionService {
  public Prediction: rx.Subject();
  private autocompleteService: new google.maps....
  constructor() { 
  this.Prediction = new rx.Subject();
  }

  getPredictions(options: any) {
    this.autocompleteService.getPlacesPrediction(options,(places, m)=>{
      this.Prediction.onNext(places); // pass appropriate predictions
   });        
  }    
}

然后您可以通过调用服务方法来请求数据，并通过订阅 RxJS 主题获得响应。

@Component() //configuration avoided for brevity
class Component 
{
 constructor(private PredictionService) {
 this.PredictionService.Prediction.subscribe((placesResult)=>{
   ... //This is where you get your data.
 });
  }

  search(){
   this.PredictionService.getPredictions(options);
  }
}

在订阅 Observable 的函数中，您可以切换加载图像的可见性。