使用Angular 2实现Google Calendar API

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

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

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

问题：我收到错误，说明"Cannot find name '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

来源

2016-11-05 cbrawl

打字稿和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后重新启动IDE。我知道我有时会这样做。

来源

2016-11-05 06:47:49

感谢您的回复。不幸的是，'npm install'路径不起作用。我相信全局变量的想法可能会奏效，但是当你说“只需将以下内容添加到TypeScript文件中”时，你指的是哪个文件？另外，在全局简单定义之后还有其他要求吗？ – cbrawl

如果您不使用全球打字文件，我认为您需要在您使用它的任何文件中声明它。不，没有其他要求。但我不知道为什么'@ types'不起作用。这个对我有用。 –

我在服务组件中放置了'声明vargapi：any'，我称之为'gapi.more.stuff'，尽管当我开始npm时错误从命令行中消失了，但是当我打开页面时错误仍然发生。我仍然在'Uncaught（承诺）：TypeError：无法在开发人员控制台中读取undefined'的属性'events'。有什么想法吗？ – cbrawl

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

而且，它似乎有助于npm install --save @types/gapi，npm install --save @types/gapi.auth2和declare var gapi: any无论我想让服务/组件调用gapi。

来源

2016-11-05 17:53:41 cbrawl

使用Angular 2实现Google Calendar API

回答

相关问题