Types Angular2/Ionic2 gapi.client.Drive中的Google驱动器API

我编写Angular2/Ionic2应用程序来显示列表并将文件上传到Google Drive。 使用Google登录可以正常工作，但是

gapi.client.drive

未定义。我应该怎么做来解决它，或者用方法来代替

我安装了

npm安装--save@types/gapi

npm安装--save@types/gapi.auth2

和我的代码

home.ts

import { Component, NgZone } from '@angular/core';

import { NavController } from 'ionic-angular';

import { Http, Headers } from '@angular/http';

import { DriveService } from '../../services/drive.service';



@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [ DriveService ]
})
export class HomePage {
  googleLoginButtonId = "google-login-button";
  userAuthToken = null;
  userDisplayName = "empty";
    auth2: any;

  constructor(public navCtrl: NavController, private _zone: NgZone, private driveService: DriveService) {

  }


  start() {
    gapi.load('auth2', () => {
      // Retrieve the singleton for the GoogleAuth library and set up the client.
       this.auth2 = gapi.auth2.init({
        client_id: 'xxx.googleusercontent.com',
        scope: 'https://www.googleapis.com/auth/drive'
      });
      this.attachSignin(document.getElementById('customBtn'));
    });
  };

  attachSignin(element) {
    console.log(element.id);
    this.auth2.attachClickHandler(element, {},
        (googleUser) => {

         this._zone.run(() => {
          this.userAuthToken = googleUser.getAuthResponse().id_token;
          this.userDisplayName = googleUser.getBasicProfile().getName();
        });
        },(error) => {
          alert(JSON.stringify(error, undefined, 2));
        });
  }


  signOut() {
    this.auth2 = gapi.auth2.getAuthInstance();

    this.auth2.signOut().then(() => {
      console.log('User signed out.');
       this._zone.run(() => {
        this.userAuthToken = null;
        this.userDisplayName = "empty";
      });
    });

  }

 listFile() {
        var request = gapi.client['drive'].files.list({
            'pageSize': 10,
            'fields': "nextPageToken, files(id, name)"
          });

          request.execute(function(resp) {
            this.appendPre('Files:');
            var files = resp.files;
            if (files && files.length > 0) {
              for (var i = 0; i < files.length; i++) {
                var file = files[i];
                this.appendPre(file.name + ' (' + file.id + ')');
              }
            } else {
              this.appendPre('No files found.');
            }
          });
  }

  appendPre(message) {
    var pre = document.getElementById('output');
    var textContent = document.createTextNode(message + '\n');
    pre.appendChild(textContent);
  }
}

从'@angular/core'导入{Component，NgZone}；
从'ionic angular'导入{NavController}；
从'@angular/Http'导入{Http，Headers}；
从“../../services/drive.service”导入{DriveService}；
@组成部分({
选择器：“主页”，
templateUrl:'home.html'，
提供商：[驱动服务]
})
导出类主页{
googleLoginButtonId=“谷歌登录按钮”；
userAuthToken=null；
userDisplayName=“empty”；
auth2：任何；
构造函数（公共navCtrl:NavController，专用_区域：NgZone，专用driveService:driveService）{
}
开始（）{
gapi.load（'auth2'，（）=>{
//检索GoogleAuth库的单例并设置客户端。
this.auth2=gapi.auth2.init({
客户端id:'xxx.googleusercontent.com'，
范围：'https://www.googleapis.com/auth/drive'
});
this.attachSignin（document.getElementById（'customBtn'）；
});
};
附件信号（元件）{
console.log（element.id）；
this.auth2.attachClickHandler（元素{}，
（谷歌用户）=>{
此._区域。运行（（）=>{
this.userAuthToken=googleUser.getAuthResponse（）.id\u令牌；
this.userDisplayName=googleUser.getBasicProfile（）.getName（）；
});
}，（错误）=>{
警报（JSON.stringify（错误，未定义，2））；
});
}
签出（）{
this.auth2=gapi.auth2.getAuthInstance（）；
this.auth2.signOut（）。然后（（）=>{
log（'User signed out'）；
此._区域。运行（（）=>{
this.userAuthToken=null；
this.userDisplayName=“empty”；
});
});
}
列表文件（）{
var request=gapi.client['drive'].files.list({
“页面大小”：10，
“字段”：“下一个GetOken，文件（id，名称）”
});
请求执行（功能（resp）{
this.appendPre（'Files:'）；
var files=resp.files；
如果（files&&files.length>0）{
对于（var i=0；i

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="start()">Start</button>
  <button ion-button (click)="signOut()">Logout</button>
  <div class="main-application">
    <p>Hello, {{userDisplayName}}!</p>
  </div>
  <div id="gSignInWrapper">
    <div id="customBtn" class="customGPlusSignIn">
      <span class="icon"></span>
      <button ion-button class="buttonText">Google</button>
    </div>
  </div>

  <button ion-button (click)="listFile()">Get Drive</button>

</ion-content>

家
开始
注销
你好，{{userDisplayName}}

谷歌
开车

我的答案： 添加到index.html谷歌API库，在

标记之后

 <script src="https://apis.google.com/js/platform.js" async defer></script>

---

我安装了

npm--save@types/google drive realtime api

，之后是。然而，在这之后，我被困住了。我在你的问题中看到你已经导入了driveService。你能告诉我使用gapi需要做些什么吗。谢谢：）

谷歌硬盘实时api

已被弃用

npm安装--save@types/gapi.client.drive

应该可以帮助您继续