ボタンGoogleマップの情報ウィンドウ内をクリック

Question

情報ウィンドウにボタンを追加します。角度2でサービスの機能にアクセスするにはどうすればよいですか？

例：

import {Injectable} from 'angular2/core'; 

@Injectable() 
export class MapService { 

    private map: any; 
    constructor() { } 

    initialize(): void { 
    this.map = new google.maps.Map(document.getElementById("map"), { 
     center: new google.maps.LatLng(33.751222, 33.98131), 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    } 

    addMarker(): void { 
    let marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(33.751222, 33.98131), 
     map: this.map 
    }); 
    let infoWindow = new google.maps.InfoWindow({ 
     content: `<h6>Content</h6><button onclick="foo()">Click me</button>` 
    }); 
    google.maps.event.addListener(marker, 'click',() => { 
     infoWindow.open(this.map, marker); 
    }); 
    } 

    foo() { 
    console.log('Clicked!'); 
    } 

} 

この例で、明らかに、動作しません： "にReferenceError：fooが定義されていません"。このボタンを機能させるにはどうすればよいですか？

ありがとうございます！

Answer 1

fooは、windowオブジェクトで検索されます。

私はアプローチを使用すると呼ばれるあなたのサービスのメソッドを取得するために

How do expose angular 2 methods publicly?

で説明しました。

ではなく、サービスのコンポーネントまたはディレクティブがあった場合、私はむしろ、このアプローチhttps://stackoverflow.com/a/8/217408 を使用しますが、window.addEventHandler('my-custom-event', onMyCustomEvent)はそう第二のアプローチはまた、あなたのサービスで動作しますようにあなたも命令的イベントハンドラを登録することができます。