google-maps - 如何在Angular2中异步加载Google Maps API

通常在一个普通的javascript站点中，我可以使用以下脚本引用google maps api，并使用callback设置initMap函数。
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
我观察到的是普通javascript站点中的initMap函数在窗口范围内，它可以在脚本参数设置-?callback=initMap中引用，但是一旦我使用名为initMap的组件方法在angular2中编写了一个组件，initMap将在我的组件范围内。然后，我在索引中设置的异步加载脚本将无法捕获我的组件initMap方法。
具体来说，我想知道如何在Angular2中实现同样的目标？
注：我知道在angular2-google-mapsviaalpha中有一个npm组件可用，但它目前的功能有限，所以我想知道如何在不使用其他组件的情况下更轻松地加载它，这样我就可以使用google maps api来实现我的项目。

最佳答案

我知道你不需要其他的组件，但是polymer的组件可以很好地与googleapi一起工作。我有一个Angular2代码，它使用了Polymer YouTube数据API。我有人帮我安装。这是让我开始的plunker。我想硬的部分是为回调准备的，我相信你可以不用聚合物。这个例子显示了一个角度服务用来连接所有东西的棘手部分。

    const url = 'https://apis.google.com/js/client.js?onload=__onGoogleLoaded'

    export class GoogleAPI {
      loadAPI: Promise<any>
      constructor(){
        this.loadAPI = new Promise((resolve) => {
          window['__onGoogleLoaded'] = (ev) => {
            console.log('gapi loaded')
            resolve(window.gapi);
          }
          this.loadScript()
        });

      }

      doSomethingGoogley(){
        return this.loadAPI.then((gapi) => {
          console.log(gapi);
        });
      }

      loadScript(){
        console.log('loading..')
        let node = document.createElement('script');
        node.src = url;
        node.type = 'text/javascript';
        document.getElementsByTagName('head')[0].appendChild(node);

      }
    }