Angular 2 - 链接可观察对象订阅

Question

我正在构建我的第一个Angular 2应用程序，遇到了链接可观察者订阅的问题。

以下代码在Chrome中运行良好，但在Firefox和IE中则不然。

请问如何正确地执行以下操作？我需要获取用户的当前位置，然后将其传递给第二个调用（getTiles）。

在Web开发浏览器工具中没有看到任何错误。这也是当我在本地主机上运行时出现的情况。该网站尚未部署。我不确定是否相关。

我使用的是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);                
            });    
}  

这里介绍一下位置服务...

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

- Ben Cameron

---

这段代码看起来正确，有什么问题吗？ 请给我们提供getLocation和getTiles的代码。 - Andrei Zhytkevich

我正在我的Angular 2 rc2应用程序中做类似的事情，并且在所有浏览器上都能正常工作。我建议在任何地方都使用强类型。这肯定会让我的生活更轻松。 - hholtij

我已经发布了getLocation和getTiles服务。 - Ben Cameron

如何使它更强类型化？ - Ben Cameron

这也是当我在本地主机上运行时出现的情况。该网站尚未部署。我不确定是否有关联。 - Ben Cameron

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

在 RxJS 5 中，concatMap 是 selectConcat 在 RxJS 4 中的替代品，根据 https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md 的说明。尽管我没有使用过 RxJS 4。

- Can Nguyen