Link zu Merkzettel in ionic 2 und eckig hinzufügen 2

Question

Ich muss eine mobile App mit ionic 2, angular 2 und typescript erstellen.
Ich benutze die Karte in meiner App.
Ich möchte auf einen Marker auf der Karte klicken Ein Popup anzeigen Einen Link enthalten.
Dieser Link ruft eine Funktion in einer Typoskriptdatei auf, arbeitet aber nicht im Popup.

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

nach zeigen Popup-Link nicht mit Klick funktionieren.
Wie kann ich dieses Problem lösen?

Answer 1

hier ist eine mögliche Art und Weise Sie es tun können:

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

Code:

@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

Um diese Arbeit zu machen, auch wenn das Popup nicht in der geöffnet wird, Ich würde vorschlagen, eine kleine Anpassung an die Antwort von Ahmed vorgeschlagen

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