javascript - Mapbox 弹出窗口中的按钮未执行功能

Question

当单击 Mapbox 弹出窗口内的按钮时，我试图打开一个模式。 HTML 正在正确呈现，但我不确定为什么未执行该功能。

let marker = new mapboxgl.Marker(el);
    try {
        marker.setLngLat([eventInfo.location[0], eventInfo.location[1]])
            .setPopup(new mapboxgl.Popup({offset: 32})
                .setHTML('<ion-button (click)="logger()">View Full</ion-button>'))
            .addTo(this.map);
    } catch (e) {
        console.log(e.message);
    }

以上是我如何创建标记并附加弹出窗口。 logger() 是我期望执行的函数。

logger(){
  console.log('hi');
}

Answer 1

我对 Ionic 作品一无所知，但我猜你不能只将 Ionic HTML 元素 ( <ion-button> ) 传递给 setHTML并期望它得到完整的 ionic 处理。 (例如，React 和 Vue 就是这种情况。)

一种解决方案是在 setHTML 中编写传统的原始 HTML :

.setHTML('<button id="view-full">View Full')
.addTo(this.map);

document.getElementById('view-full').addEventListener('click', logger)

或者，可能有一些步骤通过 Ionic 传递您的 HTML，使其按照您的预期运行。