Angular 2 geolocation

Question

Я хотел бы получить геолокацию (долготу и широту) при загрузке моего углового приложения 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. Спасибо.

Answer 1

Я предполагаю, что вы делаете вывод, что он не устанавливает this.location, потому что ваш пользовательский интерфейс не обновляется. Подтвердите, установлено ли this.location, добавив еще один консольный журнал в setPosition.

console.log(this.location); 

Я думаю, что он будет установлен, но пользовательский интерфейс не обновляется, это ваша проблема. Просто для стартера, вы можете попробовать обертывание набор местоположение в тайм-аут и увидеть, если обновления пользовательского интерфейса, как

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

Если это получает вас работает, то ваш настройку, переменную слишком рано/слишком поздно для обнаружения изменений, чтобы забрать. Вы должны переместить код SetPosition от ngOnInit к более жизненным циклом крючка, как «ngAfterViewChecked» или «ngDoCheck», но эта функция будет вызываться несколько раз, так что вы делаете свою работу только один раз, установив правильную

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

Bing вернется переплетенный функция, где контекст будет установлен на это прошел, как argument

Answer 2

Попробуйте это:

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