Angular - 打开模态组件的传单标记事件答案

【问题标题】：Angular - leaflet marker event to open modal componentAngular - 打开模态组件的传单标记事件
【发布时间】：2019-10-19 07:26:03
【问题描述】：

我使用带角度的传单，我想在标记上单击 addEventListener 以打开模态组件。但问题是，当我在下面运行我的代码时，addEventListener 会打开模态组件，而我没有点击标记。

        let m =  new L.Marker([33, 44], {
          icon: new L.DivIcon({
            className: 'my-div-icon',
            html: `
            <div>
           <img src="${f[1].weather_status_icon_ar}"/style="width: 30px;height: 
           30px;">
           </div>`

          })

}).addEventListener('click',this.navigate(this.LocationID)).addTo(this.weather)

模态组件

    async navigate(LocationID) {
    const modal = await this.modalController.create({
      component: WeatherDetailsPage,
    });

    await modal.present();
  }

我想通过标记点击手动打开模态组件而不是自动

【问题讨论】：

标签： angular leaflet marker

【解决方案1】：

这是意料之中的，因为您调用 this.navigate(this.LocationID)，这会打开一个模式，并将此函数调用返回的值返回传递给 addEventListener。

即您的代码相当于：

const result = this.navigate(this.LocationID);
....addEventListener('click', result)

你不应该调用这个函数。您应该将调用此函数的函数传递给addEventListener()：

addEventListener('click', () => this.navigate(this.LocationID))

【讨论】：