ionic 2/Angular 2 - Không chuyển dữ liệu từ Google Maps InfoWindow đến trang

Question

Tôi đang cố chuyển dữ liệu từ Google Map InfoWindow đến Info Page. Tôi có thể vượt qua và truy cập dữ liệu. Tuy nhiên, mỗi khi infoWindow được mở lại, trang sẽ kích hoạt i+1, chồng lên nhau.

Ví dụ lần đầu tiên InfoWindow được mở, Apply button được nhấp, nó sẽ chuyển đến Info Page. Đóng InfoWindow và mở lại nó, nhấp lại vào Apply button, nó sẽ mở Info Page hai lần và tiếp tục tăng thêm 1 nếu lặp lại quy trình.

Process:

Bản đồ -> đánh dấu tạo ra -> thiết lập content biến -> tạo infoWindow-> thiết lập đánh dấu để mở infoWindow khi nhấp -> infoWindow xuất hiện với nội dung -> bấm APPLY trên infoWindow -> trực tiếp đến InfoPageONCE -> đóng InfoPage -> quay lại Bản đồ với infoWindow và nội dung được mở. (Nhấp vào Apply sẽ chuyển đến InfoPage một lần nữa nhưng chỉ ONCE) ->đóng thông tinWindow -> Nhấp vào điểm đánh dấu -> infoWindow được hiển thị. -> Nhấp vào “APPLY trong cửa sổ thông tin-> trực tiếp đến“ InfoPage ”TWICE -> đóng quay lại đầu tiên InfoPage -> đóng lại bản đồ với infoWindow -> đóng cửa sổ thông tin, hiển thị bản đồ có đánh dấu. -> nhấp vào lặp lại điểm đánh dấu, InfoPage xuất hiện ba lần.

Về cơ bản mỗi lần InfoWindow đóng và mở lại, InfoPage sẽ increment by 1.

Điều tôi thấy biểu mẫu console.log là nó sẽ tạo một mảng khác khi InfoWindow được mở lại vì click eventlistener bị cắt xén. Tôi đã cố gắng sử dụng chức năng oneTime, chạy sự kiện một lần và các phương pháp khác nhưng tất cả đều không thành công.

Hãy bình luận về vấn đề này. Mọi đề xuất đều được đánh giá cao. Cảm ơn trước :)

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

Quản lý để giải quyết bằng cách sử dụng 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); 

});