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 并期望它得到全离子处理。（例如，React 和 Vue 就是这种情况。）

一个解决方案是在 setHTML:

中写入常规原始 HTML

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

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

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

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

Button inside Mapbox popup not executing function

javascript

mapbox-gl-js

mapbox-marker

angular

ionic4