2017-02-27 10 views
0

私は角度2を学んでいます。私はObservableを使って、しばらくしてから座標を渡しています。これは私のコードです。座標2を受け取ったときに購読します。

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

地図、マーカーを追加、 ..一度私は最初の購読からそれらを受け取る。

答えて

1

まず、このメソッドをサービスに配置します。

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

だからあなたはあなたがコンポーネントだ内側次

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

は、あなたがこのような何かをやる必要があります。このファイル内export class LocationServicelocation.service.tsと呼ばれるファイルを持っていると言いますありがとうございました!それは確かに事実です。私はapp.componentコードを追加します – Notflip

+0

@Notflip私はちょうど答えを更新しました。 –

+0

私のコードでは、app.componentにcoords latとlng変数を設定しましたが、それをお勧めしますか?新しいリスナー/マップを作成する最初のインスタンスを購読しているすべてのロジックを実行するだけです。厄介なコードのように思える、ない? – Notflip

関連する問題