2017-12-08 6 views
1

私はionicにgooglemapsネイティブプラグインを使用しており、ピンに触れるたびにhtmlinfowindowsを表示しています。この部分はスムーズに動作しています。htmlinfowindowsでボタンを作成するには、パラメータを渡す.tsで関数を呼び出しますか?

私はhtmlinfowindowsにボタンを配置しようとしていますが、それぞれがIDを渡す関数を呼び出していますが、関数を呼び出すボタンをクリックすることはできません。次のように私は、呼び出しのいくつかの形式を試してみた:

私は.TSでこれを持っています。var内容で

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

私の試み:

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を

に上記のフォームで .TSで

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

、目に見えないボタンのクリックイベントがトリガされますが、私はそれはパラメータがhtmlinfowindowからの機能テストに転送させる方法がわかりません。同じ問題に遭遇した人たち、DOMとのaddEventListenerとボタンを作成するための解決策については

+0

あなたがこの問題を解決しましたか?私は同じ問題を抱えています。 – George

+0

いいえ、私はあきらめて、窓のタッチを有効にしています。 –

+0

@George多くのテストと研究の後、私は解決できました。私は解決策を投稿します。 –

答えて

1

、次のように:

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; 
       }); 
      }); 
    }; 
関連する問題