javascript - 使用 Angular 2 实现 Google Calendar API

Question

我已尝试使用 Angular 2 连接到 Google Calendar API，以便我可以在我正在构建的 Web 应用程序上显示即将发生的事件。我浏览了 Google Calendar JavaScript 快速入门教程，尽管所有内容都在 index.html 文件中，但一切都运行良好。我能够设置 Google API 并将客户端 ID 和 API key 放入我的 JavaScript 代码中，它正确地列出了指定日历中即将发生的事件。

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

一旦我开始使用 JavaScript 教程，我就尝试使用 Angular2 简单地实现相同的功能，使用组件/服务而不是仅仅在 index.html 文件的脚本标记中使用原始 JavaScript。我大约成功了一半。

问题:我收到错误提示 “无法找到名称‘gapi’”。

当我第一次点击调用代码加载 Google 日历信息的页面时，我收到这些错误，指出 gapi 未定义。 gapi 存在于代码中的多个位置，特别是在分别从 Google Calendar API 验证和检索事件数据的服务中。但是，如果我离开该页面并返回，数据将毫无错误地通过。我尝试使用异步等在 index.html 中加载正确的脚本标记，如下所示:

<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 检索数据。使用另一个 promise 在身份验证成功完成后加载数据，检索到我正在寻找的事件数据。

此外，npm install --save @types/gapi、npm install --save @types/gapi.auth2 和 似乎很有帮助在服务/组件中我想调用 gapi 的任何地方声明 var gapi: any。