Necesito pasar datos entre componentes
Publicado por Luis David (1 intervención) el 04/04/2019 10:25:53
Básicamente tengo un mapa cargado con google maps. Tengo dos componentes diferentes en una misma page. Y quiero que cuando pulse en un sitio determinado que no hace falta saber, este sera un objeto que tenga coordenadas, y que cuando se pulse se llame a un método y que este coja los atributos de coordenadas y llame al componente del mapa para hacer que este se mueva hasta esas coordenadas. Mi principal problema esk si llamo a ese metodo (que es el ultimo método que hay creado). Si uso el this.map o cualquier this referenciado al componente me salta un undefined.
Aquí esta mi código desde donde llamaría al componente del mapa:
Aquí esta mi código desde donde con un método que llamo desde el otro componente se mueve el mapa.
Aquí esta mi código desde donde llamaría al componente del mapa:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
async onEventSelected(event) {
GeolocalizacionComponent.prototype.loadMapDeterminado(event.lat, event.long)
// Use Angular date pipe for conversion
const start = formatDate(event.startTime, 'medium', this.locale);
const end = formatDate(event.endTime, 'medium', this.locale);
const alert = await this.alertCtrl.create({
header: event.title,
subHeader: event.desc,
message: 'Desde: ' + start + '<br><br>Hasta: ' + end,
buttons: ['OK']
});
alert.present();
}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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import { ViewChild, ElementRef, NgZone } from '@angular/core';
import {Geolocation} from '@ionic-native/geolocation/ngx';
import { InjectionToken } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { ToastController, Platform,LoadingController
} from '@ionic/angular';
import { GoogleMaps, GoogleMap, GoogleMapsEvent, Marker, GoogleMapsAnimation, MyLocation,LatLng
} from '@ionic-native/google-maps';
@Component({
selector: 'app-geolocalizacion',
templateUrl: './geolocalizacion.component.html',
styleUrls: ['./geolocalizacion.component.scss'],
})
export class GeolocalizacionComponent { public map: GoogleMap; loading: any; constructor(public loadingCtrl: LoadingController,
public toastCtrl: ToastController,
private platform: Platform) { }
async ngOnInit() {
// Since ngOnInit() is executed before `deviceready` event,
// you have to wait the event.
await this.platform.ready();
await this.loadMap();
}loadMap() {
this.map = GoogleMaps.create('map_canvas', {
camera: {
target: {
lat: 43.0741704,
lng: -89.3809802
},
zoom: 18,
tilt: 30 }});
}async onButtonClick() {
this.map.clear();
this.loading = await this.loadingCtrl.create({
message: 'Por favor espera...'
});
await this.loading.present();
// Get the location of you
this.map.getMyLocation().then((location: MyLocation) => {
this.loading.dismiss();
console.log(JSON.stringify(location, null ,2));
// Move the map camera to the location with animation
this.map.animateCamera({
target: location.latLng,
zoom: 17,
tilt: 30});
// add a marker
let marker: Marker = this.map.addMarkerSync({
title: '@ionic-native/google-maps plugin!',
snippet: 'This plugin is awesome!',
position: location.latLng,
animation: GoogleMapsAnimation.BOUNCE
});
// show the infoWindow
marker.showInfoWindow();
// If clicked it, display the alert
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
this.showToast('clicked!');
});
})
.catch(err => {
this.loading.dismiss();
this.showToast(err.error_message);
});
}async showToast(message: string) {
let toast = await this.toastCtrl.create({
message: message,
duration: 2000,
position: 'middle'
});
toast.present();
}async loadMapDeterminado( lat, long) {
this.map.clear();
}}Valora esta pregunta
0