我已经在我的 Angular 6 应用程序中实现了 @asymmetrik/ngx-leaflet,除了弹出窗口之外,一切正常。在我在 map 中显示了一些标记后,它的显示如图所示:marker popup
我想在用户单击按钮时更改路由,但是 Angular (click) 事件不会触发单击事件,我在单击弹出窗口之前在 onClick 及其调用中实现了内联函数 javascript尽可能多的 map 有标记!所以它不起作用。代码是这样的:
this.listOfStations.map(station => {
if(Object.keys(station.location).length > 0){
this.markers.push(marker([station.location.coordinates[0],station.location.coordinates[1]],{
icon: icon({
iconSize: [ 25, 41 ],
iconAnchor: [ 13, 41 ],
iconUrl: 'assets/marker-icon.png',
shadowUrl: 'assets/marker-shadow.png'
})
})
.bindPopup(`
<div align='center'>
<p style='font-size:18px;font-weight:bold'>Station: ${station.stationCode}</p>
<p style='font-size:14px;font-weight:italic'>${station.description}</p>
<a class='btn btn-xs btn-primary button-me' (click)="${this.consoleThis()}">View</a>
</div>
`)
// .on('click', (e) => {
// this.zone.run(() => {
// this.router.navigate(['/dashboard/station/' + station.stationCode]);
// })
// })
)};
});
谢谢。
最佳答案
我为我正在开发的应用程序做了类似的事情并让它像这样工作:
.bindPopup(`
<div align='center'>
<a class="btn btn-primary button-raised partner-link" data-partnerId="${markerinfo.partnerId}">
${markerinfo.partnerName}</a>
<p style='font-size:14px;margin: 5px'>${markerinfo.partnerAddress}</p>
<img style="height: 100px; width: 170px; margin: 0" src="${markerinfo.descImg}">
<p style="margin:5px;font-style:italic">${markerinfo.descText}</p>
</div>
`).addTo(map)
.on('popupopen', function () {
self.elementRef.nativeElement.querySelector('.partner-link')
.addEventListener('click', (e) => {
const partnerId = e.target.getAttribute('data-partnerId');
self.showPartner(partnerId);
});
})
showPartner(partnerId) {
// this.router.navigate(['/app/partners' + '/' + partnerId]);
console.log('going to partner: ' + partnerId);
}
关于Angular Leaflet 弹出式点击不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51169124/