Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.09.2017, 21:15
Интересующийся
Отправить личное сообщение для mrmammoth Посмотреть профиль Найти все сообщения от mrmammoth
 
Регистрация: 19.03.2014
Сообщений: 22

Как правильно сделать сервис?
Доброго дня-утра-вечера
Начал копать Angular2 и вот завис:
Не получается сделать сервис. Такое впечатление, что он не отрабатывает вообще
Помогите пжалста, кто не сильно занят...

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';

import { Settings} from './settings';
import { CurrentLocationService } from './current-location.service';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { GeolocationComponent } from './geolocation/geolocation.component';

import { GetweatherService } from './getweather.service';
import { GetcityComponent } from './getcity/getcity.component';

@NgModule({
declarations: [
AppComponent,
HeaderComponent,
GeolocationComponent,
GetcityComponent
],
imports: [
BrowserModule, HttpModule
],
providers: [GetweatherService,CurrentLocationService],
bootstrap: [AppComponent]
})
export class AppModule { }

//current-location.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class CurrentLocationService {


mylocation = {};


CurrentPosition() {
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(this.setP osition.bind(this));
};
console.log('ок'); // ВОТ этого в логах нет...
}


private setPosition(position){
this.mylocation = position.coords;

}

}

вызываю сервис например здесь
//geolocation.components.ts
import { Component, Input, OnInit } from '@angular/core';
import { CurrentLocationService } from '../current-location.service';

@Component({
selector: 'app-geolocation',
templateUrl: './geolocation.component.html',
styleUrls: ['./geolocation.component.scss'],

})


export class GeolocationComponent implements OnInit {

constructor(private _currentlocationservice: CurrentLocationService) {}


ngOnInit() {
var location = this._currentlocationservice.mylocation;

}
}
Ответить с цитированием
  #2 (permalink)  
Старый 08.09.2017, 06:46
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

mrmammoth,
конструктор добавь в сервис свой
Ответить с цитированием
  #3 (permalink)  
Старый 08.09.2017, 11:48
Интересующийся
Отправить личное сообщение для mrmammoth Посмотреть профиль Найти все сообщения от mrmammoth
 
Регистрация: 19.03.2014
Сообщений: 22

Спасибо, помогло.
Ещё не поможете малость?
//geolocation.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { GetlocationService } from '../getlocation.service';

@Component({
  selector: 'app-geolocation',
  templateUrl: './geolocation.component.html',
  styleUrls: ['./geolocation.component.scss'],
  
})
export class GeolocationComponent implements OnInit {

  constructor( private _getlocationservice: GetlocationService) { }

  myLocation={};

  ngOnInit() {
    this._getlocationservice.getCurrentPosition().subscribe(
     data => {this.myLocation = data}, 
     error => console.log('Error fetching data'));
    console.log(this.myLocation)
  }

}

//geolocation.component.html
<p>{{myLocation.coords.latitude}} , {{myLocation.coords.longitude}}</p>

Координаты на странице отображаются, но в лог вываливает вот такое:
ERROR TypeError: _co.myLocation.coords is undefined
Stack trace:
View_GeolocationComponent_0/<@ng:///AppModule/GeolocationComponent.ngfactory.js:11:9
updateRenderer@http://localhost:4200/vendor.bundle.js:56763:61
checkAndUpdateView@http://localhost:...ndor.bundle.js:56282:5
callViewAction@http://localhost:4200/vendor.bundle.js:56642:21
execComponentViewsAction@http://loca...ndor.bundle.js:56574:13
checkAndUpdateView@http://localhost:...ndor.bundle.js:56283:5
callViewAction@http://localhost:4200/vendor.bundle.js:56642:21
execComponentViewsAction@http://loca...ndor.bundle.js:56574:13
checkAndUpdateView@http://localhost:...ndor.bundle.js:56283:5
callViewAction@http://localhost:4200/vendor.bundle.js:56642:21
execComponentViewsAction@http://loca...ndor.bundle.js:56574:13
checkAndUpdateView@http://localhost:...ndor.bundle.js:56283:5
../../../core/@angular/core.es5.js/</ViewRef_.prototype.detectChanges@http://localhost:4200/vendor.bundle.js:54203:9
../../../core/@angular/core.es5.js/</ApplicationRef_.prototype.tick/<@http://localhost:4200/vendor.bundle.js:48834:58
../../../core/@angular/core.es5.js/</ApplicationRef_.prototype.tick@http://localhost:4200/vendor.bundle.js:48834:13
../../../core/@angular/core.es5.js/</ApplicationRef_.prototype._loadComponent@http://localhost:4200/vendor.bundle.js:48809:9
../../../core/@angular/core.es5.js/</ApplicationRef_.prototype.bootstrap@http://localhost:4200/vendor.bundle.js:48797:9
../../../core/@angular/core.es5.js/</PlatformRef_.prototype._moduleDoBootstrap/<@http://localhost:4200/vendor.bundle.js:48568:74
../../../core/@angular/core.es5.js/</PlatformRef_.prototype._moduleDoBootstrap@http://localhost:4200/vendor.bundle.js:48568:13
../../../core/@angular/core.es5.js/</PlatformRef_.prototype._bootstrapModuleFactoryWith Zone/</</<@http://localhost:4200/vendor.bundle.js:48530:21
../../../../zone.js/dist/zone.js/</</ZoneDelegate.prototype.invoke@http://localhost:4200/polyfills.bundle.js:2937:17
onInvoke@http://localhost:4200/vendor.bundle.js:47912:24
../../../../zone.js/dist/zone.js/</</ZoneDelegate.prototype.invoke@http://localhost:4200/polyfills.bundle.js:2936:17
../../../../zone.js/dist/zone.js/</</Zone.prototype.run@http://localhost:4200/polyfills.bundle.js:2687:24
scheduleResolveOrReject/<@http://localhost:4200/polyfills.bundle.js:3389:52
../../../../zone.js/dist/zone.js/</</ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.bundle.js:2970:17
onInvokeTask@http://localhost:4200/vendor.bundle.js:47903:24
../../../../zone.js/dist/zone.js/</</ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.bundle.js:2969:17
../../../../zone.js/dist/zone.js/</</Zone.prototype.runTask@http://localhost:4200/polyfills.bundle.js:2737:28
drainMicroTaskQueue@http://localhost...ills.bundle.js:3147:25

в чём беда?
Ответить с цитированием
  #4 (permalink)  
Старый 08.09.2017, 12:07
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

<p>{{myLocation.coords?.latitude}} , {{myLocation.coords?.longitude}}</p>
Ответить с цитированием
  #5 (permalink)  
Старый 08.09.2017, 12:23
Интересующийся
Отправить личное сообщение для mrmammoth Посмотреть профиль Найти все сообщения от mrmammoth
 
Регистрация: 19.03.2014
Сообщений: 22

Спасибо
Ответить с цитированием
  #6 (permalink)  
Старый 08.09.2017, 13:39
Интересующийся
Отправить личное сообщение для mrmammoth Посмотреть профиль Найти все сообщения от mrmammoth
 
Регистрация: 19.03.2014
Сообщений: 22

И ещё, надеюсь крайняя на сей момент проблема: служба в службу
import { Injectable } from '@angular/core';
import { Http } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map';
import { Settings} from './settings';
import { GetlocationService } from './getlocation.service';

@Injectable()
export class GetweatherService {
  
  constructor(private http: Http, private _getlocationservice: GetlocationService) {}

  coordData: any;
  

	getWeatheritemsbyCoords(): Observable<any>{

	this._getlocationservice.getCurrentPosition().subscribe(
     	data => {this.coordData = data}, 
     	error => console.log('Error fetching geolocation data'));
     	console.log(this.coordData)

		 return this.http.get(Settings.BaseURL+'?lat='+this.coordData.coords.latitude+'&lon='+this.coordData.coords.longitude+'&APPID='+Settings.APPID)
    	 .map(response => response.json());
    	 //return this.http.get(Settings.BaseURL+'?lat='65.785645&lon=33.106754&APPID='+Settings.APPID)
    	 //.map(response => response.json()); - Так работает
    	 
	}
}

лог:
ERROR TypeError: this.coordData is undefined
Если можно?...
Ответить с цитированием
  #7 (permalink)  
Старый 08.09.2017, 13:45
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

mrmammoth,
Добро пожаловать на грабли асинхронного программирования
Ответить с цитированием
  #8 (permalink)  
Старый 12.09.2017, 14:04
Интересующийся
Отправить личное сообщение для mrmammoth Посмотреть профиль Найти все сообщения от mrmammoth
 
Регистрация: 19.03.2014
Сообщений: 22

ок. погуглил и сделал запрос с задержкой
(некрасиво, конечно. надо бы ждать не 5 сек а получение координат. но пока хоть так)
import { Injectable } from '@angular/core';
import { Http } from '@angular/http'; 
import 'rxjs/Rx';
import { IntervalObservable } from 'rxjs/observable/IntervalObservable';

import { Settings} from './settings';
import { GetlocationService } from './getlocation.service';

@Injectable()
export class GetweatherService {
  coordData: any;

  constructor(private http: Http, private _getlocationservice: GetlocationService) {}
    
    getCurrentCoords(){
    	this._getlocationservice.getCurrentPosition().subscribe(
     	data => {this.coordData = data}, 
     	error => console.log('Error fetching geolocation data'));
    }

	
	getWeatherbyCoordsIntrval(){
		return IntervalObservable
    	.create(5000)
    	.flatMap(() => {
        return this.http.get(Settings.BaseURL+'?lat='+this.coordData.coords.latitude+'&lon='+this.coordData.coords.longitude+'&APPID='+Settings.APPID)
        .map(response => response.json());

     });
	}
}


import { Component, OnInit } from '@angular/core';
import { GetweatherService } from '../getweather.service';


@Component({
  selector: 'app-getplace',
  templateUrl: './getplace.component.html',
  styleUrls: ['./getplace.component.scss']
})
export class GetplaceComponent implements OnInit {

  weatherData: any[];

  constructor(private _getweatherservice: GetweatherService) { }

  ngOnInit() {
  	this._getweatherservice.getWeatherbyCoordsIntrval() .subscribe(
  	 data => {this.weatherData = data}, 
  	 error => console.log('Error fetching weather data'));
  }

}

теперь не могу получить данные
Error fetching weather data
Ответить с цитированием
  #9 (permalink)  
Старый 12.09.2017, 14:11
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

mrmammoth,
не вижу, чтобы getCurrentCoords() где-то вызывалось.
Ответить с цитированием
  #10 (permalink)  
Старый 12.09.2017, 14:28
Интересующийся
Отправить личное сообщение для mrmammoth Посмотреть профиль Найти все сообщения от mrmammoth
 
Регистрация: 19.03.2014
Сообщений: 22

ой
вот так работает. спасибо
getWeatherbyCoordsIntrval(){
		this._getlocationservice.getCurrentPosition().subscribe(
     	data => {this.coordData = data}, 
     	error => console.log('Error fetching geolocation data'));

		return IntervalObservable
    	.create(500)
    	.flatMap(() => {
        return this.http.get(Settings.BaseURL+'?lat='+this.coordData.coords.latitude+'&lon='+this.coordData.coords.longitude+'&APPID='+Settings.APPID)
        .map(response => response.json());

     });
	}
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать чтобы кнопка «Назад» работала бы в пределах определенного сайта? Askeer Общие вопросы Javascript 7 14.10.2016 12:23
Как сделать чтобы кнопка «Назад» работала бы в пределах определенного сайта? Askeer Общие вопросы Javascript 0 12.10.2016 18:58
Как сделать что бы картинки с другого url отображались как свои zlodey Серверные языки и технологии 1 04.05.2015 21:30
Как правильно обновить div из БД в MVC??? espltd AJAX и COMET 2 11.04.2014 01:28
try и catch подскажите как правильно сделать Jekel Javascript под браузер 9 31.03.2010 10:33