Angular2 - 在回調函數中設置的組件變量值未在模板中更新

Question

用戶案例：當在Web瀏覽器中打開應用程序時，用戶將獲得更改 - 「瞭解您的位置」，並顯示選項「允許」和「拒絕」。

我有以下代碼示例。

ngOnInit() { 
    if ("geolocation" in navigator) { 
    navigator.geolocation.getCurrentPosition((position) => { 
     this.latitude = position.coords.latitude; 
     this.longitude = position.coords.longitude; 
     this.zoom = 18; 
    }); 
    } 
} 

這個工程，我能看到的console.log緯度和經度的最終值是當前的位置，如果允許，否則它是我硬編碼的默認值。

現在我在這裏的問題是這樣的更新的當前位置的變化不能在模板中看到，當打印{{latitude}}和{{longitude}}

我一直在使用ngZone和ChangeDetectorRef嘗試，但沒有成功

誰能幫助

Answer 1

地理定位API不包含在Angulars區域中。 讓Angulars區明確地和角度變化檢測內部運行的回調將運行，並確保該視圖更新：

constructor(private zone:NgZone) {} 

ngOnInit() { 
    if ("geolocation" in navigator) {     
    navigator.geolocation.getCurrentPosition((position) => { 
     this.zone.run(() => { 
     this.latitude = position.coords.latitude; 
     this.longitude = position.coords.longitude; 
     this.zoom = 18; 
     }); 
    }); 
    } 
}