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

Question

用户案例：当应用程序在网络浏览器中打开时，用户可以通过“允许”和“拒绝”选项更改“了解您的位置”。

我有以下代码示例。

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 区域内显式运行，Angular 更改检测将运行并确保视图已更新：

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