Angular2 -组件变量值在回调函数上设置了未在模板中更新

Question

用户案例：在Web浏览器中打开应用程序时，用户会更改 - "知道您的位置"，带有选项"允许"one_answers"拒绝"。

我有以下代码样本。

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区域内进行回调，并且将运行角更改检测并确保更新视图：

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