Angular 2，訂閱時收到座標

Question

我正在學習Angular 2.我使用帶有Observable的LocationService，它在一段時間之後提供給我座標。這是我的代碼。

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

我如何訂閱座標的接收這樣我就可以呈現地圖，添加一個標記， ..一旦我從第一個訂閱接收它們。

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