Question

我必须使用离子2，角度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);

显示弹出链接后无法使用点击。
如何解决这个问题？

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

为了使这项工作即使在开头没有打开弹出窗口时我也会建议对艾哈迈德提出的答案进行一点调整

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

Answer 3

我也建议对艾哈迈德（Ahmed）提出的答案进行一些改动。

“我尝试了此解决方案，但是当您在不关闭当前打开的弹出窗口的情况下从弹出窗口传递到另一个弹出窗口时，该链接不起作用，如何解决此问题？”

要解决此问题，只需添加一个“ 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);
  });

在离子2和角度2中添加到传单弹出的链接

3 个答案: