Angular 2 - Verkettung beobachtbare abonniert

Question

Ich baue meine erste Angular 2 App und habe ein Problem Verkettung beobachtbare abonniert.

Der Code unten funktioniert gut in Chrome aber nicht in Firefox und IE.

Was ist der richtige Weg, um das Folgende zu tun? Ich muss den aktuellen Standort des Benutzers abrufen und ihn dann an einen zweiten Anruf weiterleiten (getTiles).

Ich sehe keine Fehler in den Web-Dev-Browser-Tools. Dies ist auch, wenn ich auf localhost laufe. Die Site ist noch nicht bereitgestellt. Ich bin mir nicht sicher, ob das zusammenhängen könnte.

Ich verwende Angular 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);     
      });  
} 

Hier ist die Lage Service ...

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

Hier ist der getTiles Service ...

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

Ihr Code sieht richtig, aber in Ihrem Fall können Sie nisten vermeiden Abonnements, indem Sie dies tun ...

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) ist selectConcat in RxJS 4 nach https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md, ich habe RxJS 4 nicht benutzt, obwohl