Observableを返すサービスを構築するには？

Question

Google Maps Places Autocomplete APIにクエリを実行し、オブジェクトの配列を返すサービスを構築しています。サービス自体はかなり簡単です。私はMaps JS APIを使用しています。文字列がサービスに渡され、一致するリストが返されます。

問題は、このサービスをAngular Observableに出力する方法ですか？私は今の私どこ

は、これは次のとおりです。

import {Injectable, OnInit} from '@angular/core'; 
import {Observable} from 'rxjs/Rx'; 
declare var google: any; 

@Injectable() 
export class GoogleMapsService { 

    getAutocomplete(input = {'input': '', 'types': [] }) { 
     var autocomplete = new google.maps.places.AutocompleteService(); 
     return autocomplete.getPlacePredictions({ input: input.input }); 
    } 
} 

をしかし、これは観察できないで、私はそれに.subscribeすることはできません。

Answer 1

マニュアルによると、autocomplete.getPlacePredictionsにはリクエストとコールバックの2つのパラメータがあります。だからあなたはできます：

Observable.create(obs => { 
    let displaySuggestions = function (predictions, status) { 
    if (status != google.maps.places.PlacesServiceStatus.OK) { 
     obs.error(status); 
    } 
    else { 
     obs.next(predictions); 
     obs.complete(); 
    } 
    }; 

    var service = new google.maps.places.AutocompleteService(); 
    service.getQueryPredictions({input: 'test'}, displaySuggestions); 
}); 

Answer 2

getQueryPredictionsためthe example in the docsを見る：

var service = new google.maps.places.AutocompleteService(); 
service.getQueryPredictions({ input: 'pizza near Syd' }, displaySuggestions); 

それは最後の引数は、結果を受け取るコールバックであることを期待しています。 getPlacePredictionsはおそらく同じです。

return Observable.bindCallback(autocomplete.getPlacePredictions)({ input: input.input }); 

注bindCallbackその戻り包まれた関数と同じ引数を取る関数、マイナスコールバックを：これは次のようにObservable.bindCallbackを使用できることを示唆しています。