使用Angular 2实现谷歌日历API

Question

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

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

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

问题：我收到错误，说明“找不到名称‘gapi’”。

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

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

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

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

Answer 1

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

import { } from '..'

declare var gapi: any;

@Component({..})

或者更好的是，只需安装打字。这将添加全局键入，您将在Google API上获得编译时检查

npm install --save-dev @types/gapi

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

Answer 2

问题是在验证完成之前试图从Google日历API检索数据。使用另一个promise，在身份验证完成后加载数据，成功地检索到我正在查找的事件数据。

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