Google Picker API + Angular2 getting Uncaught TypeError: Cannot read property 'handleAuthResult' of undefined

Question

我正在我的应用程序中集成 Google 选择器 API。我正在关注官方文档 Google Picker API

google api js 我按照文档

的建议包含在我的 index.html 页面中

 <script type="text/javascript" src="https://apis.google.com/js/api.js"></script>

这是我在 html 页面中的 div :

<img src="../GoogleDrive.png(click)="onApiLoad()">

这是我的组件代码：

  onApiLoad() {
         let self = this;
         gapi.load('auth', {'callback': self.onAuthApiLoad});
         gapi.load('picker');
     }

     onAuthApiLoad() {
         let self = this;
         window.gapi.auth.authorize(                
                 {
                     'client_id': "clientid",
                     'scope': ['https://www.googleapis.com/auth/drive.readonly'],
                     'immediate': false
                 },
                 self.handleAuthResult);
     }

      handleAuthResult(authResult:any) {
         let self = this;
         if (authResult && !authResult.error) {
             oauthToken = authResult.access_token;
             self.createPicker(oauthToken);
         }
     }

     createPicker() {
         let self = this;
         if ( oauthToken) {
             var pickerBuilder = new google.picker.PickerBuilder();
             var picker = pickerBuilder
             .enableFeature(google.picker.Feature.NAV_HIDDEN)
             .setOAuthToken(oauthToken)
             .addView(google.picker.ViewId.DOCS_VIDEOS)
             .setDeveloperKey('apikey')
             .setCallback(self.pickerCallback)
             .build();
             picker.setVisible(true);
         }
     }

     pickerCallback(data) {
         let self = this;
         if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
             var doc = data[google.picker.Response.DOCUMENTS][0];
             self.downloadGDriveFile(doc.id , doc.name);
         }
     }

     downloadGDriveFile(fileId, name){
}

我收到未捕获的类型错误：无法读取未定义的属性 'handleAuthResult'。谁能帮帮我..

Answer 1

我认为 load 方法没有在回调中提供词法 this，请尝试将 this 绑定到您的方法：

gapi.load('auth', {'callback': self.onAuthApiLoad.bind(this)});

Google Picker API + Angular2 getting Uncaught TypeError: Cannot read property 'handleAuthResult' of undefined

Google Picker API + Angular2 getting Uncaught TypeError: Cannot read property 'handleAuthResult' of undefined

google-picker

angular2-routing

angular