Googleマップのインフォ画面からAngular2関数を呼び出すにはどうすればよいですか？

Question

Googleマップはjavascriptの方法で統合されており、次のコードのようにinfowindow内でangular2関数を呼び出す必要があります。ボタンのためにinfoContentを見てください。

for (i = 0; i < locations.length; i++) { 

    let locLatLng = new google.maps.LatLng(locations[i].latitude, locations[i].longitude); 
    let infoContent = '<button (click)="myFunction(' + locations[i].id + ')">Details ...</button>'; 

    marker = new google.maps.Marker({ 
    position: locLatLng, 
    map: this.map 
    }); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     infowindow.setContent(infoContent); 
     infowindow.open(this.map, marker); 
    }; 
    })(marker, i)); 

} 

残念ながら角度クリックイベント(click)="myFunction()"はそれを行うことはできません。別の方法が必要です。誰かが私を正しい方向に向けることができれば、私はとても喜んでいます。前もって感謝します。

Answer 1

（コメントから）更新

あなたはElementRefとRendererでそれを行うことができますが、それは問題ではありません。問題は、ボタンのリファレンス（直接DOM要素リファレンスまたはElementRef）を取得することです。 private elRef:ElementRefを注入してthis.elRef.nativeElement.querySelector('infowindow button')などを使用することもできますが、elRef.nativeElementにアクセスすると、nativeElementには直接アクセスしないでください。ただし、Rendererはメソッドを呼び出すことはできますが、決して実行することができないため、プラットフォームの中立性の領域外です。返品の結果を得るには、あまりにも多くのことができます。

Trigger event with infoWindow or InfoBox on click Google Map API V3のような方法を使用して、興味のある要素がクリックされた場合はevent.targetを確認します。

元

あなたがあなたの代わりに

google.maps.event.addListener(marker, 'click', ((marker, i) => { // <<<=== 
    return() => { // <<<=== 
     infowindow.setContent(infoContent); 
     infowindow.open(this.map, marker); 
    }; 
    })(marker, i) 

を矢印の関数を使用する必要があるイベントハンドラでthis.mapにアクセスしたい場合はそうでないthis.は現在のクラスのインスタンスを指しています

Answer 2

ますルートウィンドウでngZoneへの参照をインスタンス化し、infoWindowから呼び出すことができます。

まずあなたは、コンストラクタでNgZoneへのアクセスを取得する必要があります。

constructor(public _ngZone: NgZone) { } 

をそして、あなたはあなたのコードに依存し、どこかngOnInit、コンストラクタに、バックウィンドウ内のあなたのゾーンへのポインタを設定したりすることができます：

window["angularComponentRef"] = { component: this, zone: this._ngZone }; 

最後に、infoWindowからゾーン付きAngular関数にコールバックすることができます。このように実行します。

for (i = 0; i < locations.length; i++) { 
     let locLatLng = new google.maps.LatLng(locations[i].latitude, locations[i].longitude); 
     let infoContent: string = '<button onclick="window.angularComponentRef.zone.run(() => {window.angularComponentRef.component.myFunction(\'' + locations[i].id + '\');})">Details ...</button>'; 

     marker = new google.maps.Marker({ 
      position: locLatLng, 
      map: this.map 
     }); 

     google.maps.event.addListener(marker, 'click', (function (marker, i) { 
      return function() { 
       infowindow.setContent(infoContent); 
       infowindow.open(this.map, marker); 
      }; 
     })(marker, i)); 

    } 

そしてpoluteウィンドウの名前空間を避けるために、必要なときに、あなたは、たとえばngOnDestroyに、機能をきれいにすることができます：

window["angularComponentRef"] = null; 

Answer 3

私は多くのことを検索し、答えを見つけました：

あなたは使用する必要があります。

：あなたの例では$コンパイル（htmlString）（スコープ）

はこれを試します

var infoContent = '<button ng-click="myFunction(' + locations[i].id + ')">Details</button>'; 

var scope = angular.element(document.getElementById('anyElementId')).scope(); 
var compiled = $compile(htmlElement)(scope); 

そして使用：

infowindow.setContent(compiled[0]); 

WALA！

Answer 4

私の解決策です。まず、IDを情報ウィンドウのボタンに設定します。その後、情報ウィンドウの「domready」イベントを検出しました。つまり、すべてのHTMLがブラウザーによってDOMツリーに受け渡され、解析されました。そして、getElementByIdをボタンにアクセスし、イベント 'click'を追加します。ここでは、tsファイルで定義された関数を呼び出すことができます。

const infoWindowContent = '<h6>' + community.typeOfCommunity + '</h6>' + 
      '<p>' + community.address.name + ' ' + community.streetNumber + ', ' + community.city + '</p>' + 
      '<p>Manager: ' + community.manager.fullName + '</p>' + 
      '<button id="infoWindowButton">More info</button>'; 
     const infoWindow = new google.maps.InfoWindow({ 
      content: infoWindowContent 
     }); 

     marker.addListener('click',() => { 
      infoWindow.open(this.map, marker); 
     }); 

     infoWindow.addListener('domready',() => { 
      document.getElementById("infoWindowButton").addEventListener("click",() => { 
      this.myFunction(); 
      }); 
     });