Angular - Scope en Angular

 
Vista:
sin imagen de perfil
Val: 12
Ha mantenido su posición en Angular (en relación al último mes)
Gráfica de Angular

Scope en Angular

Publicado por Lairinys (4 intervenciones) el 03/06/2020 15:30:19
Hola, soy completamente nueva en Angular y estoy tratando de crear un servicio que entregue a un componente la ubicación actual (latitud y longitud)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { Injectable } from '@angular/core';
 
@Injectable({
  providedIn: 'root'
})
export class CurrentPositionService {
 
  public latitude: number
  public longitude: number
 
  constructor() {
    this.getCurrentLocation()
    console.log(this.latitude)
  }
 
  public getCurrentLocation() {
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition((position) => {
        this.setValues(position)
      });
    }
  }
 
  public setValues(position: Position){
    this.latitude = position.coords.latitude
    this.longitude = position.coords.longitude
    console.log(this.latitude)
  }
 
}

El problema es que todo parece ir bien hasta el método setValues, donde la latitud aparece correctamente en el console.log, se supone o eso creía yo que las propiedades latitud y longitud de la clase se actualizaron correctamente luego de ejecutar el método getCurrentLocation, pero al tratar de mostrar estas propiedades (console.log) desde el constructor o desde un componente el resultado es undefined. A continuación les muestro el componente desde el cual estoy intentando obtener los valores latitud y longitud de este servicio

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Component, OnInit } from '@angular/core';
import { CurrentPositionService } from 'src/app/services/current_position/current-position.service';
 
 
@Component({
  selector: 'app-actual-city',
  templateUrl: './actual-city.component.html',
  styleUrls: ['./actual-city.component.css'],
  providers:[CurrentPositionService]
})
export class ActualCityComponent implements OnInit {
  title: string = 'AGM project';
  latitude: number;
  longitude: number;
  constructor(private _currentPosition : CurrentPositionService) {
   }
 
  ngOnInit(): void {
    this.latitude=this._currentPosition.latitude
    console.log(this.latitude)
  }
}

Yo pienso que es algo relacionado con el scope o ámbito de las funciones, pero no logro identificar exactamente cuál es el problema exactamente y como hacer que funcione. A continuación les muestro también el código del app.module

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { GoogleMapsModule } from '@angular/google-maps';
import { ActualCityComponent } from './components/actual-city/actual-city.component';
import { CurrentPositionService } from './services/current_position/current-position.service'
 
@NgModule({
  declarations: [
    ActualCityComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    GoogleMapsModule
  ],
  providers: [CurrentPositionService],
  bootstrap: [ActualCityComponent]
})
export class AppModule { }
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de moises
Val: 56
Oro
Ha mantenido su posición en Angular (en relación al último mes)
Gráfica de Angular

Scope en Angular

Publicado por moises (11 intervenciones) el 03/06/2020 16:49:49
Hola Lairinys mándame el link del repositorio para descargar el proyecto, ejecutarlo y reproducir el problema, para ver si te puedo ayudar. me puedes contactar por correo si lo prefieres.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 12
Ha mantenido su posición en Angular (en relación al último mes)
Gráfica de Angular

Scope en Angular

Publicado por Lairinys (4 intervenciones) el 03/06/2020 17:42:13
Gracias Moises, aquí puedes encontrar el código https://github.com/lairinys/pruebaAngular
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de moises
Val: 56
Oro
Ha mantenido su posición en Angular (en relación al último mes)
Gráfica de Angular

Scope en Angular

Publicado por moises (11 intervenciones) el 04/06/2020 06:44:02
El problema que tienes es de asincronia (se estan imprimiendo los valores de latitud y longitud y luego se le asignan los valores.).¿ por que quieres tener los los metodos de posicionamiento en un servicio? facilmente los puedes poner en el componente
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 12
Ha mantenido su posición en Angular (en relación al último mes)
Gráfica de Angular

Scope en Angular

Publicado por Lairinys (4 intervenciones) el 04/06/2020 10:04:05
Gracias Moises, creo que tienes razón con respecto a que el problema es de asincronía, la idea de tenerlo en un servicio ha sido para darle mayor reusabilidad al código y para separar la lógica del componente. Pero bueno, estos son mis primeros pasos en Angular y es un ensayo que estoy haciendo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de moises
Val: 56
Oro
Ha mantenido su posición en Angular (en relación al último mes)
Gráfica de Angular

Scope en Angular

Publicado por moises (11 intervenciones) el 04/06/2020 11:12:31
si estas comenzando en angular te recomiendo que comiences por algo mas facil.

actual-city.component:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { Component, OnInit } from '@angular/core';
import { CurrentPositionService } from 'src/app/services/current_position/current-position.service';
import { async } from '@angular/core/testing';
 
 
@Component({
  selector: 'app-actual-city',
  templateUrl: './actual-city.component.html',
  styleUrls: ['./actual-city.component.css']
})
export class ActualCityComponent implements OnInit {
  title: string = 'AGM project';
  latitude: number;
  longitude: number;
  constructor(private _currentPosition : CurrentPositionService) {
   }
 
  ngOnInit() {
    this.getPosition();
  }
 
  getPosition(){
    this._currentPosition.getCurrentLocation()
    .then( resp => console.log(resp) )
    .catch( error => console.log('Hay un error'));
  }
}


current-position.service:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { Injectable } from '@angular/core';
 
@Injectable({
  providedIn: 'root'
})
export class CurrentPositionService {
 
  constructor() {
  }
 
getCurrentLocation() {
    return new Promise ( resolve => {
      if ('geolocation' in navigator) {
        navigator.geolocation.getCurrentPosition((position) => {
          const posicionActual = {
            latitud: position.coords.latitude,
            longitud: position.coords.longitude
          };
          resolve( posicionActual );
        });
      }
    });
  }
 
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de moises
Val: 56
Oro
Ha mantenido su posición en Angular (en relación al último mes)
Gráfica de Angular

Scope en Angular

Publicado por moises (11 intervenciones) el 04/06/2020 11:13:20
ese seria el codigo correcto para que lo puedas usar en un componente. analiza el codigo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 12
Ha mantenido su posición en Angular (en relación al último mes)
Gráfica de Angular

Scope en Angular

Publicado por Lairinys (4 intervenciones) el 04/06/2020 18:15:03
¡Genial!, funciona perfecto, solo me quedó un algo confuso esta parte return new Promise ( resolve => { y esta otra resolve( posicionActual ); porque en la primera entiendo que resolve se pasa como parámetro al código que le sigue entre llaves, pero luego resolve también devuelve el resultado, es como que es un parámetro y a la vez es la función que devuelve el resultado de la promesa. Lo demás me quedó completamente claro, de verdad muchas gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de moises
Val: 56
Oro
Ha mantenido su posición en Angular (en relación al último mes)
Gráfica de Angular

Scope en Angular

Publicado por moises (11 intervenciones) el 04/06/2020 18:22:11
De nada, y te entiendo, al comienzo tampoco entendía de promesas y observables. tenia que leer una y otra vez sobre el tema para poder entender.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de moises
Val: 56
Oro
Ha mantenido su posición en Angular (en relación al último mes)
Gráfica de Angular

Scope en Angular

Publicado por moises (11 intervenciones) el 04/06/2020 08:02:56
entiendo si quieres pedir la posicion de distintos componentes, podrias implementar las promesas para poder solucionar tu problema.

ha algunos de talles que tienes que mejorrar en tu codigo, por ejemplo la implementacion del servicio no es el correcto, ni desde el componente ni desde el propio servicio.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar