ionic 2/Angular 2 - Nie można przekazać danych z Google Maps InfoWindow do strony

Question

Próbuję przekazać dane z Google Map InfoWindow do Info Page. Jestem w stanie przekazać i uzyskać dostęp do danych. Jednak za każdym razem, gdy program infoWindow jest ponownie otwierany, strona zostanie uruchomiona i+1, nakładając się nawzajem.

Na przykład po raz pierwszy otwarty program InfoWindow, Apply button kliknięty, przejdzie do Info Page. Zamknięcie okna InfoWindow i ponowne otwarcie go, ponowne kliknięcie przycisku Apply button spowoduje dwukrotne otwarcie Info Page i kontynuowanie inkrementacji o 1 w przypadku powtórzenia procesu.

Proces:

Mapa -> markery stworzony -> set content zmiennej -> stworzyć infoWindow-> Ustaw znacznik, aby otworzyć infoWindow po kliknięciu -> infoWindow pojawić się z treścią -> kliknij APPLY na infoWindow -> bezpośrednio do InfoPageRAZ -> zamknij InfoPage -> bezpośrednio wróć do mapy z infoWindow i zawartością otwartą. (Kliknij Apply ponownie przejdzie na InfoPage, ale tylko RAZ) ->close infoWindow -> Kliknij na znacznik -> infoWindow pokazano. -> Kliknij "APPLY w oknie informacyjnym-> bezpośrednio do" InfoPage "TWICE -> Zamknij wróć do pierwszego InfoPage -> Zamknij wróć do mapy z infoWindow -> zamknij okno informacyjne, pokaż mapę ze znacznikami. -> kliknij na znacznik powtarza, InfoPage pojawiają trzykrotnie.

Zasadniczo za każdym razem, gdy InfoWindow jest zamykane i ponownie otwierane ponownie, InfoPage będzie increment by 1.

To, co widziałem w formularzu console.log, to utworzenie kolejnej tablicy po ponownym otwarciu InfoWindow, ponieważ zadziała click eventlistener. Próbowałem użyć funkcji oneTime, raz uruchomić zdarzenie i inne metody, ale wszystkie nie powiodły się.

Prosimy o komentarz na temat problemu. Wszelkie sugestie są mile widziane. Z góry dzięki :)

GoogleMapProvider.ts

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import { App } from 'ionic-angular'; 

    constructor(
    public http: Http, 
    public app:App, 
) { 
    } 

addMarker(lat: any, lng: any , listingID:any): void { 

let latLng = new google.maps.LatLng(lat, lng); 

let marker = new google.maps.Marker({ 
    map: this.map, 
    animation: google.maps.Animation.DROP, 
    position: latLng, 

}); 

this.markers.push(marker); 

    this.addInfoWindow(marker,listingID); 

} 

addInfoWindow(marker,listingID){ 

this.http.get('http://localhost/infoWindow.php?id=' + listingID) 
    .map(res => res.json()) 
    .subscribe(Idata => { 

    let infoData = Idata; 

     let content = "<ion-item>" + 
    "<h2 style='color:red;'>" + infoData['0'].ListingTitle + "</h2>" + 
    "<p>" + infoData['0'].ListingDatePosted + ' ' + infoData['0'].ListingTime + "</p>" + 
    '<p id="' + infoData['0'].ListingID + '">Apply</p>' 
    "</ion-item>";  

let infoWindow = new google.maps.InfoWindow({ 
content: content 
}); 

    google.maps.event.addListener(infoWindow, 'domready',() => { 

    let goInfoPage = document.getElementById(infoData['0'].ListingID); 

    goInfoPage.addEventListener('click',() => { 

    let pushData = infoData['0']; 

    let nav = this.app.getActiveNav(); 

    nav.push('InfoPage',{'record':pushData}); 

    }) 
}); 

google.maps.event.addListener(marker, 'click',() => { 

infoWindow.open(this.map, marker); 

    }); 

}); 

} 

Info.ts

ionViewDidLoad() 
{ 
    this.selectEntry(this.NP.get("record")); //getting the record 
} 

Answer 1

udało się rozwiązać za pomocą removeEventListener

google.maps.event.addListener(infoWindow, 'domready',() => { 

    let goInfoPage = document.getElementById(infoData['0'].ListingID); 

const onClick =() => { 

    let pushData = infoData['0']; 

    let nav = this.app.getActiveNav(); 

    nav.push('InfoPage',{'record':pushData}); 

    goInfoPage.removeEventListener('click', onClick); 
    } 


    goInfoPage.addEventListener('click',onClick); 

});