Question

我使用googlemaps原生插件进行离子操作，并在触摸到针脚时显示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内容的尝试：

   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中的一个隐形按钮，其中（点击）调用我的函数：

in .html

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

in .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;
                });
          });
  };

如何在htmlinfowindows中创建一个按钮调用.ts传递参数的函数？

1 个答案: