使用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

回答

相關問題