Question

我使用google的地方api，getPlacePredictions，这是我的输入密钥事件代码：

我的模板：正在搜索...

我的班级：

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

Answer 2

您可以在包含第三方ajax调用的Angular Service中创建RxJS主题。例如：

use Symfony\Component\Validator\Constraints as Assert;
/**
 *  @Assert\IsTrue(message="Please indicate the number of payments")
 */
public function isValid()
{
    return $this->active == null || ($this->active != null && $this->numberOfPayments != null)
}

然后，您可以通过调用服务方法来请求数据，并通过订阅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
   });        
  }    
}

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

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

2 个答案: