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