Question

用户案例：在Web浏览器中打开应用程序后，用户可以更改 - ＆＃34;了解您的位置＆＃34;选项＆＃34;允许＆＃34;和＆＃34;拒绝＆＃34;。

我有以下代码示例。

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

Angulars区域不包含地理位置API。使回调在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;
      });
    });
  }
}

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

1 个答案: