在谷歌地图的信息窗口内单击按钮答案

【问题标题】：Button click inside Info window in google maps在谷歌地图的信息窗口内单击按钮
【发布时间】：2016-08-26 12:11:39
【问题描述】：

我想在信息窗口中添加一个按钮。如何在 Angular 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 is not defined”。我怎样才能使这个按钮起作用？

谢谢！

【问题讨论】：

标签： javascript google-maps google-maps-api-3 angular

【解决方案1】：

在window 对象上搜索foo。

我会使用

中解释的方法

How do expose angular 2 methods publicly?

获取调用的服务方法。

如果它是一个组件或指令而不是一个服务，我宁愿使用这种方法https://stackoverflow.com/a/36832108/217408 但您也可以像window.addEventHandler('my-custom-event', onMyCustomEvent) 这样强制注册事件处理程序，因此第二种方法也适用于您的服务。

【讨论】：