Angular2データバインディングを持つNativeScriptがジオロケーションで動作しない

Question

現在の位置を表示する簡単なPOCを開発中です。 プログラムはgeolocation.watchLocationから情報を受信しますが、モニタリングの停止ボタンを押すまで、位置はバインドされずに画面に表示されます。ログが正しくあなたが()=>代わりのfunction()を使用する場合は、あなたが_selfハックを必要としない座標に

JS: Start Monitoring ... 
JS: Location: 49.6411839:6.0040451 
JS: Stop Monitoring ... 

---

import {Component} from "@angular/core"; 
import {Router} from "@angular/router"; 
import geolocation = require("nativescript-geolocation"); 

@Component({ 
    selector: "TrackingPageSelector", 
    template:` 
    <StackLayout> 
     <Button [text]="watchId==0 ? 'Start Monitoring' : 'Stop Monitoring'" (tap)="buttonStartStopTap()"></Button> 
     <Label class="labelValue" [text]="latitude"> </Label> 
     <Label class="labelValue" [text]="longitude"> </Label> 
    </StackLayout>` 
}) 

export class TrackingPageComponent { 
    latitude: number = 0; 
    longitude: number = 0; 
    watchId: number = 0; 
    constructor(private router: Router) {} 

    ngOnInit() { 
     if (!geolocation.isEnabled()) geolocation.enableLocationRequest(); 
    } 

    public buttonStartStopTap() { 
     if (this.watchId != 0) { 
      console.log('Stop Monitoring ...'); 
      geolocation.clearWatch(this.watchId); 
      this.watchId = 0; 
     } else { 
      console.log('Start Monitoring ...'); 
      let _self = this; 
      this.watchId = geolocation.watchLocation(
       function (loc) { 
        if (loc) { 
         _self.latitude = loc.latitude; 
         _self.longitude = loc.longitude; 
         console.log(`Location: ${_self.latitude}:${_self.longitude}`); 
        } 
       }, 
       function(e){ 
        this.errorMsg = e.message; 
       }, 
       {desiredAccuracy: 3, updateDistance: 10, minimumUpdateTime: 1000 * 3}); // Should update every X seconds 
     } 
    } 
} 

Answer 1

を示していることに留意されたいです。 変更検出を手動で呼び出す必要があるようです。 NgZoneは、あなただけのローカルなフィールドを変更する場合は、現在のコンポーネントの外にいくつかの状態を変更する可能性があるメソッドを呼び出す場合cdRef.detectChanges()は、より良い選択肢であるgeolocation.watchLocation()

constructor(private cdRef:ChangeDetectorRef) {} 

... 

     this.watchId = geolocation.watchLocation(
      (loc) => { 
       if (loc) { 
        this.latitude = loc.latitude; 
        this.longitude = loc.longitude; 
        this.cdRef.detectChanges(); 
        console.log(`Location: ${this.latitude}:${this.longitude}`); 
       } 
      }, 
      (e) => { 
       this.errorMsg = e.message; 
      }, 

または代わりzone.run(() => ...)

constructor(private zone:NgZone) {} 

... 

     this.watchId = geolocation.watchLocation(
      (loc) => { 
       if (loc) { 
        this.zone.run(() => { 
        this.latitude = loc.latitude; 
        this.longitude = loc.longitude; 

        console.log(`Location: ${this.latitude}:${this.longitude}`); 
        }); 
       } 
      }, 
      (e) => { 
       this.errorMsg = e.message; 
      }, 

などを覆わないようです、 zone.run(...)が最適です。