如何从传单弹出 html 中的复选框 onchange 调用 Angular 函数？

Question

我正在使用 Leaflet，我的标记很少。因此，当将鼠标悬停在标记上时，会打开一个弹出窗口，在该弹出窗口中，有一个复选框。所以我需要的是每当用户单击该复选框时它应该更改弹出内容。例如，

复选框名称是更多信息。默认弹出窗口包含悬停后的纬度和经度。当用户单击该复选框时，弹出窗口应显示城市、州以及经纬度。我在复选框的 onchange 事件中创建了一个带有函数的复选框，但它没有调用创建的 angular 函数，而是在寻找 JavaScript 函数。我怎样才能调用 Angular 函数或者是否有任何其他解决方法来实现它？

我用过以下方法，

<input type="checkbox" onchange="showDetails(this);"/>
<input type="checkbox" onchange={{showDetails(this);}}/>

我的示例代码如下所示

L.Routing.control({
    waypoints: waypoints,
    lineOptions: {
      styles: [{color: '#453f30', opacity: 1, weight: 5}],
      addWaypoints: false,
      extendToWaypoints: false,
      missingRouteTolerance: 0,
    },
    plan: L.Routing.plan(waypoints, {
      createMarker: function (i, wp) {
        return L.marker([latitude, longitude], {
          icon: icon,
        }).bindPopup('<input type="checkbox" onchange={{showDetails(this);}}/>More Info', {
          closeButton: true,
        }).on("mouseover", function (event) {
          event.target.openPopup();
        });
      }
    })
  }).addTo(this.map);

Answer 1

您已经非常接近解决方案了。您可以像上面那样使用 popupopen 事件和 mouseover 事件。你的复选框应该是这样的。

<input type="checkbox" id="chkbox1"/>

然后进行如下操作，

}).bindPopup('<input type="checkbox" id="chkbox1"/>More Info', {
  closeButton: true,
}).on("mouseover", function (event) {
  event.target.openPopup();
}).on("popupopen", function (event) {
    // Here I am using JQuery. You can add JQuery to your Project
    $("#chkbox1").on("click", e => {
        e.preventDefault();
        
        if ($("#chkbox1").is(":checked")) {
            // your code goes here if checked
        } else {
            // 
        }
    });
});

如何从传单弹出 html 中的复选框 onchange 调用 Angular 函数？

How to call Angular function from checkbox onchange in leaflet popup html?

leaflet

typescript

leaflet-routing-machine

angular