javascript - 如何使 htmlinfowindows 中的按钮调用 .ts 传递参数中的函数？

Question

我正在使用 ionic 的 googlemaps native 插件，并在触摸图钉时显示 htmlinfowindows。这部分运行顺利。

我试图将按钮放在 htmlinfowindows 中，每个按钮在我的 ts 中调用一个函数并传递一个 id，但我无法单击按钮调用函数。我试过几种调用方式，如下:

我的 .ts 中有这个:

   this.map.addMarker({
       'html': content,  // here I feed the HTML with the attempts below
        icon: {       // it is the content that appears in the htmlinfowindow window
          'url': icone
        },
        position: {
           lat: lat,
           lng: lng
        }
   }).then(marker => {
       marker.on(GoogleMapsEvent.MARKER_CLICK)
       .subscribe(() => {
            if (this.auxi){
               this.auxi = null;
            }
            var htmlInfo = new HtmlInfoWindow();
            htmlInfo.setContent(marker.get('html'));
            htmlInfo.open(marker);
            this.auxi = htmlInfo;
       });
  });

  test(param){
    console.log(param);
  }     

我在 var content 中的尝试:

   click is not detected
   var content = '<div><button type="buttton" (click)="test(\'idtest\');">update price</button></div>';

   Uncaught TypeError: this.test is not a function
   var content = '<div><button type="buttton" onclick="this.test(\'idteste\');">update price</button></div>';

   Uncaught TypeError: test is not a function
   var content = '<div><button type="buttton" onclick="test(\'idtest\');">update price</button></div>';

所以我尝试点击我的 .html 中的一个不可见按钮，其中(点击)调用我的函数:

在 .html 中

  <button ion-button [hidden]='true'  (click)='test(event)' id="bot"></button>

在.ts 中

   var content = '<div><button type="buttton" onclick="document.getElementById(\'bot\').click({\'param\': \'idtest\'}, this.test);">update price</button></div>';

在上面的表单中，触发了不可见按钮的点击事件，但我不知道如何将它转发给来自htmlinfowindow的参数的功能测试。

Answer 1

对于遇到同样问题的人，使用DOM创建按钮和addEventListener的解决方法如下:

for(var estab of this.arrayEstabs){
      var placeId = estab.PlaceId;
      var lat = estab.Lat;
      var lng = estab.Lng;
      var nome = estab.Nome;
      var html = nome+'<br>Preço <b>R$ '+this.format(estab.Preco)+'</b><br>';

      var btNavega = document.createElement("Button");
      var t = document.createTextNode("Navegar até aqui"); 
      btNavega.appendChild(t)
      btNavega.addEventListener("click", (event) => { this.showToast("test1") } );
      btNavega.setAttribute("class", "btNavega");

      var btPreco = document.createElement("Button");
      var p = document.createTextNode("Atualizar preço"); 
      btPreco.appendChild(p)
      btPreco.addEventListener("click", (event) => { this.showToast("teste2") } );
      btPreco.setAttribute("class", "btPreco");

      var div = document.createElement("div");
      div.innerHTML = html;
      div.appendChild(btNavega);
      div.appendChild(btPreco);
      div.setAttribute("class", "infoWindow");
          this.map.addMarker({
              'html': div,
              icon: {
                'url': icone
              },
              animation: 'DROP',
              position: {
                lat: lat,
                lng: lng
              }
            })
          .then(marker => {
              marker.on(GoogleMapsEvent.MARKER_CLICK)
                .subscribe(() => {
                  if (this.auxi){
                    this.auxi = null;
                  }
                  var htmlInfo = new HtmlInfoWindow();
                  htmlInfo.setContent(marker.get('html'));
                  htmlInfo.open(marker);
                  this.auxi = htmlInfo;
                });
          });
  };