Angular 2 地理位置答案

【问题标题】：Angular 2 geolocationAngular 2 地理位置
【发布时间】：2016-07-14 01:38:11
【问题描述】：

我想在加载我的 angular 2 应用程序时获取地理位置（经度和纬度），并将其设置为变量位置。我该怎么做呢？这是 app.component：

import { Component, OnInit} from '@angular/core';
@Component({
     moduleId: module.id,
     selector: 'app-root',
     template: `
     <h2>{{location.latitude}}</h2>
     `
     })

export class AppComponent implements OnInit{
   location = {};
   setPosition(position){
      this.location = position.coords;
      console.log(position.coords);
      }
ngOnInit(){
   if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition(this.setPosition);
      };
   }
 }

当我打印 position.coords 时，它就出来了。但它似乎没有设置 this.location。谢谢。

【问题讨论】：

标签： angular geolocation

【解决方案1】：

我假设您推断它没有设置 this.location 因为您的 UI 没有更新。让我们通过在 setPosition 中添加另一个控制台日志来确认是否设置了 this.location。

  console.log(this.location);

我认为它会被设置，但 UI 没有更新是你的问题。只是对于初学者，您可以尝试在超时中包装位置集，看看 UI 更新是否像

setTimeout( position => this.location = position.coords, 0);

如果这能让您工作，那么您将变量设置得太早/太晚，以至于无法进行更改检测。您应该将 setPosition 的代码从 ngOnInit 移动到更好的生命周期钩子，例如 'ngAfterViewChecked' 或 'ngDoCheck' 但此函数将被多次调用，因此您只需设置正确的工作一次即可

ngOnInit(){
   if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition(this.setPosition.bind(this));
      };
   }
 }

Bing 将返回一个绑定函数，其中上下文将固定为 this 传递为 argument

【讨论】：

谢谢。我正在设置 this.location。我意识到“this”指的是窗口对象。所以它没有在 AppComponent 上设置它。我仍然不确定如何解决它。

【解决方案2】：

试试这个：

ngOnInit(){
   if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition(position => {
        this.location = position.coords;
        console.log(position.coords); 
      });
   }
 }

【讨论】：

OP想使用成功回调函数