NativeScript mit Angular2-Datenbindung arbeitet nicht mit Geolocation

Question

Ich entwickle ein einfaches POC, um die aktuelle Position anzuzeigen. Das Programm empfängt die Informationen von der geolocation.watchLocation, aber die Position wird nicht gebunden und auf dem Bildschirm angezeigt, bis ich die Schaltfläche STOP Überwachung drücke. Ist zu beachten, dass das Protokoll korrekt die Koordinaten

zeigt

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

Wenn Sie ()=> statt function() verwenden, dann müssen Sie nicht den _self Hack. Offenbar müssen Sie die Änderungserkennung manuell aufrufen. NgZone scheint nicht 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; 
      }, 

oder alternativ zone.run(() => ...) wie

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

abzudecken Wenn Sie nur lokale Felder ändern cdRef.detectChanges() ist die bessere Option, wenn Sie Methoden aufrufen, die einige Zustand außerhalb der aktuellen Komponente ändern könnte , zone.run(...) ist die bessere Option.