用Angular 2实现谷歌日历API

Question

我已经尝试使用Angular 2连接到Google Calendar API，这样我就可以在我正在构建的web应用程序上显示即将发生的事件。我浏览了Google Calendar JavaScript快速入门教程，尽管所有内容都在index.html文件中，但它运行得非常完美。我能够设置谷歌API，并将客户端ID和API密钥放在我的JavaScript代码中，它正确地列出了指定日历中即将发生的事件。

链接到快速入门教程:https://developers.google.com/google-apps/calendar/quickstart/js

一旦我得到了JavaScript教程的工作，我试图简单地实现同样的功能使用Angular2，使用组件/服务，而不仅仅是在index.html文件的脚本标签的原始JavaScript。我成功了一半。

问题:我得到错误说明"Cannot find name 'gapi'"。

当我第一次点击调用代码来加载Google Calendar信息的页面时，我得到这些错误，说明没有定义gapi。gapi存在于代码中的几个位置，特别是在分别从Google Calendar API进行身份验证和检索事件数据的服务中。但是，如果我离开该页面并返回，数据将没有错误地通过。我已经尝试在index.html中使用async等加载适当的脚本标签，如下所示:

<script src="https://apis.google.com/js/client.js?onload=checkAuth" async></script>

如何解决这个问题?我的代码与下面链接的存储库中看到的非常相似:

https://github.com/stefanreichert/angular2-google-calendar-example

Answer 1

问题是试图在身份验证完成之前从Google Calendar API检索数据。使用另一个承诺，然后在身份验证完成后加载数据，成功检索到我正在寻找的事件数据。

此外，它似乎对npm install --save @types/gapi, npm install --save @types/gapi.auth2和declare var gapi: any有帮助，无论我想在服务/组件中调用gapi。

Answer 2

TypeScript和Javascript是不同的东西。TypeScript不能编译JS，它只知道TypeScript。所以当你尝试使用全局JS(运行时)对象时，TypeScript对它一无所知(因为它只是编译时的)。因此，您需要一种方法来声明全局gapi。你可以使用任意的declare。有些人会走这条路。你可以在你的TypeScript文件

中添加以下内容

import { } from '..'
declare var gapi: any;
@Component({..})

或者更好的是，直接安装类型。这将添加全局类型，您将在Google API

上进行编译时检查。

npm install --save-dev @types/gapi

您可能需要在安装此程序后重新启动IDE。我知道我有时会。