谷歌地圖InfoWindow - （點擊）觸發Angular 2功能

Question

我有一個組件可以在Angular 2+應用程序中利用谷歌地圖。有沒有一種體面的方式可以將鏈接導入到標記的infowindow中，這會觸發組件中的方法？下面的(click)是麻煩點。如果我想搞一個全局方法（希望避免這種方法），我可以換成onclick。

//Add directions if we have a current location 
let additionalContent = ""; 
if(this.positionMarker){ 
    additionalContent = `<br><a href='#' (click)='startNavigating(${marker.position.lat()}, ${marker.position.lng()})'>Directions</a>`; 
} 

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

google.maps.event.addListener(marker, 'click',() => { 
    infoWindow.open(this.map, marker); 
}); 

Answer 1

發現了幾件，使這項工作沒有瘋狂的角度開銷。鑰匙還在於：

1. 只有1個信息窗口（會員）
2. 添加唯一的ID錨標記
3. 當信息窗口打開（domready），增加一個點擊監聽到錨的ID，這是點擊以下

代碼：

//Add directions if we have a current location 
let additionalContent = ""; 
if (this.positionMarker) { 
    additionalContent = `<br><a href='#' id='marker_${markerId}'>Directions</a>`; 
} 

//Add the marker listener to open the infowindow 
google.maps.event.addListener(marker, 'click',() => { 
    this.infoWindow.setContent(content + additionalContent); 
    this.infoWindow.open(this.map, marker); 

    //Once infow window is open, add a click listener based on the ID in the anchor tag 
    if (additionalContent) { 
    google.maps.event.addListenerOnce(this.infoWindow, 'domready',() => { 
     document.getElementById(`marker_${markerId}`).addEventListener('click',() => { 
     this.startNavigating(marker.position.lat(), marker.position.lng()); 
     }); 
    }); 
    } 
});