[英]add link to leaflet popup in ionic 2 and angular 2
我必须使用ionic 2,angular 2和Typescript构建一个移动应用程序。
我在应用程序中使用传单地图。
我想在地图上单击一个标记,以显示一个弹出窗口,其中包含一个链接。
此链接在打字稿文件中调用函数,但在弹出窗口中不起作用。
public goToMerchant(merchantId) {
this.navCtrl.push(MerchantPage, { merchantId: merchantId });
}
var popupLink='<a (click)="goToMerchant(200)">Show</a>'
Leaflet.marker([item.lat, item.lng])
.bindPopup(popupLink)
.addTo(map);
之后,显示弹出链接不适用于单击。
如何解决这个问题?
这是一种可行的方法:
码:
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<div id="mapid" style="height: 180px;"></div>
</div>
`,
})
export class App implements AfterViewInit{
name:string = `Angular! v${VERSION.full}`;
myMap: any;
constructor(private elementRef: ElementRef) {}
goToMerchant(merchantId) {
//this.navCtrl.push(MerchantPage, { merchantId: merchantId });
console.log("going to merchant "+merchantId)
}
ngAfterViewInit(){
// setup map
this.myMap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {}).addTo(this.myMap);
// note class= merchLink and data-merchId = 200
var popupLink='<a class="merch-link" data-merchId="200">Show</a>'
// add marker
var marker = L.marker([51.5, -0.09])
.bindPopup(popupLink)
.addTo(this.myMap)
.openPopup();
// add event listener to newly added a.merch-link element
this.elementRef.nativeElement.querySelector(".merch-link")
.addEventListener('click', (e)=>
{
// get id from attribute
var merchId = e.target.getAttribute("data-merchId");
this.goToMerchant(merchId)
}));
}
}
为了即使在开始没有打开弹出窗口时也能使此工作正常进行,我建议对Ahmed提出的答案进行一些改动
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<div id="mapid" style="height: 180px;"></div>
</div>
`,
})
export class App implements AfterViewInit{
name:string = `Angular! v${VERSION.full}`;
myMap: any;
constructor(private elementRef: ElementRef) {}
goToMerchant(merchantId) {
//this.navCtrl.push(MerchantPage, { merchantId: merchantId });
console.log("going to merchant "+merchantId)
}
ngAfterViewInit(){
// setup map
this.myMap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {}).addTo(this.myMap);
// note class= merchLink and data-merchId = 200
var popupLink='<a class="merch-link" data-merchId="200">Show</a>'
// add marker
var marker = L.marker([51.5, -0.09])
.bindPopup(popupLink)
.addTo(this.myMap);
let self = this;
marker.on('popupopen', function() {
// add event listener to newly added a.merch-link element
self.elementRef.nativeElement.querySelector(".merch-link")
.addEventListener('click', (e)=>
{
// get id from attribute
var merchId = e.target.getAttribute("data-merchId");
self.goToMerchant(merchId)
});
});
}
我也建议对艾哈迈德的答案做些小改动。
“我尝试了此解决方案,但是当您在不关闭当前打开的弹出窗口的情况下从弹出窗口传递到另一个弹出窗口时,该链接不起作用,如何解决此问题?”
要解决此问题,只需添加“ setTimeout”
marker_suc.on('popupopen', function () { setTimeout(function () { self.elementRef.nativeElement.querySelector(".merch-link") .addEventListener('click', (e) => { var id_empresa = e.target.getAttribute("data-merchId"); // <---- OBTIENE EL ID EMPRESA self.irOfertas(id_empresa) // <---- LLAMA A LA FUNCION }); }, 500); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.