谷歌地图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()); 
     }); 
    }); 
    } 
});