Компонент Angular 2 для получения геолокации.

Чтобы получить данные о геолокации из браузера, мы должны писать собственный код упаковки SDK каждый раз, когда мы делаем вызовы HTML5 или Google API. Работая над проектом в TixDo, мы столкнулись с той же проблемой, и разработанное нами решение - компонент ng2-location.

ng2-location - это компонент Angular 2 для получения текущего географического местоположения. Этот компонент призван обеспечить быстрый и простой способ использования информации о географическом местоположении, доступной в современных браузерах в приложениях Angular 2. Помимо этого, у него также есть служба Injectable () т.е. EmitterService, созданная для отправки и получения данных о геолокации в виде интерфейс Местоположение, который хранится в локальном хранилище.

Как использовать -

Компонент ng2-location - это полностью интегрированный и автономный компонент.

  1. Перейдите по ссылке и скачайте zip-архив.
  2. Разархивируйте этот пакет и добавьте компонент «ng2-location» в существующее приложение angular 2.
  3. Чтобы загрузить компонент ng2-location, используйте селектор ‹ngLocation› ‹/ngLocation›
    с учетом любого компонента, также не забудьте импортировать «ngSelectLocation» и «EmitterService» в этот компонент.
  4. Включите EmitterService в поставщики и зарегистрируйте ngSelectLocation в директивах.

Пример -

В следующем фрагменте кода показан рабочий пример компонента ng2-location:

import {Component, OnInit} from ‘angular2/core’;
import {ngSelectLocation, EmitterService} from ‘./components/ng2-location/browser-location’;
@Component({
 selector: ‘seed-app’,
 providers: [EmitterService],
 directives: [ngSelectLocation],
 template: `
 <ngLocation></ngLocation>
 ` 
})
export class SeedApp implements OnInit{
 public selectedCity:any;
 constructor(private EmitterService: EmitterService) {
 window.localStorage.removeItem(“city”);
 }
ngOnInit(){
 this.selectedCity = localStorage.getItem(‘city’);
 EmitterService.get(“selectedCity”).subscribe(data =>{
 this.selectedCity = data;
 localStorage.setItem(‘city’, data);
 });
 }
}

В нашем примере мы также реализовали крючок жизненного цикла ngOnInIt () компонента angular 2 для получения названия города из локального хранилища.