在离子2和角2中添加链接到单张弹出窗口

Question

我必须使用离子2，角2和打字脚本来构建移动应用程序。
我在我的应用程序中使用传单地图。
我想单击地图上的标记，显示一个弹出框中包含一个链接。
此链接在打字稿文件中调用一个函数，但不能在弹出窗口中工作。

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); 

显示弹出窗口链接不起作用点击。
如何解决这个问题？

Answer 1

这里是一个可能的方式，你可以做到这一点：

Plunker https://plnkr.co/edit/CjZrDkxjxvjT5l3qIxMP?p=preview

代码：

@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) 
    })); 

    } 
} 

Answer 2

为了使即使在弹出是不是在打开这个工作开始我会建议对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) 
     }); 
    }); 
    }