Angular 2、收到坐标后订阅

Question

我正在学习 Angular 2. 我正在使用 LocationService 和 Observable，它会在一段时间后将坐标交给我。这是我的代码。

location.service.ts

public getLocation(): Observable<any> {
    return Observable.create(observer => {
        if(window.navigator && window.navigator.geolocation) {
            window.navigator.geolocation.getCurrentPosition(
                (position) => {
                    observer.next(position);
                    observer.complete();
                },
                (error) => observer.error(error)
            );
        } else {
            observer.error('Unsupported Browser');
        }
    });
}

app.component.ts

ngOnInit() {
    this.location.getLocation().subscribe((coordinates) => {
        this.lat = coordinates.coords.latitude;
        this.lng = coordinates.coords.longitude;
    });
}

How can I subscribe to the receiving of the coordinates so I can render a map, add a marker, .. once I receive them from the first subscribe.

Answer 1

首先，我会将该方法放入服务中。

假设您有一个名为 location.service.ts 的文件，其中包含 export class LocationService，您将拥有以下内容

getLocation(): Observable<any> {
    return Observable.create(observer => {
        if(window.navigator && window.navigator.geolocation) {
            window.navigator.geolocation.getCurrentPosition(
                (position) => {
                    observer.next(position);
                    observer.complete();
                },
                (error) => observer.error(error)
            );
        } else {
            observer.error('Unsupported Browser');
        }
    });
}

在您的组件中，您将执行如下操作：

import { Component, OnInit } from '@angular/core';
import { LocationService } from '/shared/location.service.ts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implments OnInit {

  constructor(private service: LocationService) {}

   ngOnInit(){
     this.service.getLocation().subscribe(rep => {
        // do something with Rep, Rep will have the data you desire.
     });
   }
}

Angular 2、收到坐标后订阅

Angular 2, subscribe when coordinates are received

javascript

angular

rxjs

angular2-observables