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)
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
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
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: numberconstructor() {
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
0
