Угловые 2 - цепные наблюдаемые подписчики

Question

Я строю свой первый Угловое 2 приложение и у меня проблема с цепочкой наблюдаемых подписчиков.

Ниже код хорошо работает в Chrome но не в Firefox и IE.

Каков правильный способ сделать ниже? Мне нужно получить текущее местоположение пользователя, затем передать его во второй вызов (getTiles).

Я не вижу ошибок в инструментах браузера веб-разработчиков. Это также когда я запускаю на localhost. Сайт еще не развернут. Я не уверен, что это может быть связано.

Я использую Угловой 2.0.0-rc.2.

ngOnInit(): void { 

     this._LocationService.getLocation().subscribe(
      location => {this.location = location; 

        // make the next call using the result of the first observable 
        this._TilesService.getTiles(0, location).subscribe(
         tiles => {this.tiles = tiles; this.index = 1;}, 
         error => this.errorMessage = <any>error);     
      });  
} 

Вот сервис расположение ...

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { Observer } from 'rxjs/Observer'; 

import { ILocation } from '../interfaces/location'; 

@Injectable() 
export class LocationService { 

    constructor() { } 

    getLocation(): Observable<ILocation> { 

     let locationObservable = new Observable<ILocation>((observer: Observer<ILocation>) => { 

      if (navigator.geolocation) { 

       var positionOptions = { 
        enableHighAccuracy: false, 
        timeout: 1000, 
        maximumAge: 5000 
       }; 

       navigator.geolocation.getCurrentPosition(function (position) { 

        var location: ILocation = { 
         Longitude: position.coords.longitude, 
         Latitude: position.coords.latitude 
        }; 

        observer.next(location); 
       }, this.locationErrorHandler, positionOptions); 
      } 
     }); 

     return locationObservable; 
    } 

    locationErrorHandler(error:any) { } 
} 

Вот служба getTiles ...

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 

import { ITile } from '../interfaces/tile'; 
import { ILocation } from '../interfaces/location'; 

@Injectable() 
export class TilesService { 

    constructor(private _http: Http) { } 

    getTiles(index: number, location: ILocation): Observable<ITile[]> { 
     this._tileUrl = 'SOME URL'; 

     return this._http.get(this._tileUrl) 
      .map((response: Response) => <ITile[]> response.json()) 
      .catch(this.handleError); 
    } 

    private handleError(error: Response) { 
     console.error(error); 
     return Observable.throw(error.json().error || 'Server error'); 
    } 
} 

Answer 1

Ваш код выглядит правильно, но в вашем случае вы можете избежать вложенности подписки, сделав это ...

ngOnInit(): void { 

    this._LocationService.getLocation().concatMap(location => { 
     this.location = location; 

     // make the next call using the result of the first observable 
     return this._TilesService.getTiles(0, location);  
    }).subscribe(
     tiles => {this.tiles = tiles; this.index = 1;}, 
     error => this.errorMessage = <any>error);     
} 

concatMap (RxJS 5) выбираетConcat в RxJS 4 в соответствии с https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md, я не использовал RxJS 4, хотя