Question

能够偶尔访问一次Google Picker。当我打开应用程序时，并非每次都打开Google Picker Popup。

我正在Angular 6中实现Google Picker API。我将单独的文件保存在angular的资产文件夹中，用于连接Google API的逻辑，并通过document.createElement（“ script”）的帮助附加了javascript文件。而且我在app.component.html中有一个Anchor标记用于getElementById。

app.component.html

<a routerLink="/" id="AllFilePick" #AllFilePick> Button </a>

app.component.ts

    import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';


    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })


    export class AppComponent implements OnInit {

      @ViewChild('AllFilePick') AllFilePick: ElementRef;

      constructor(private elementRef: ElementRef) { }


      ngOnInit() { 

        var s1 = document.createElement("script");
        s1.type = "text/javascript";
        s1.src = "../assets/api-script.js";
        this.elementRef.nativeElement.appendChild(s1);

        var s2 = document.createElement("script");
        s2.src = "https://www.google.com/jsapi?key=<API_KEY>";
        this.elementRef.nativeElement.appendChild(s2);

        var s3 = document.createElement("script");
        s3.src = "https://apis.google.com/js/client.js?onload=SetPicker";
        this.elementRef.nativeElement.appendChild(s3);

        // console.log(this.AllFilePick.nativeElement);
        console.log(s1);
        console.log(s2);
        console.log(s3);

      }
    }

我什至尝试使用ngAfterViewInit（用于添加脚本标记的构造函数）。

资产/api-script.js

    function SetPicker() {
        var picker = new FilePicker(
            {
                apiKey: ‘<API_KEY>’, 
                clientId: ‘<CLIENT_ID>’,
                buttonEl: document.getElementById("AllFilePick"),
                onClick: function (file) {             
                    PopupCenter('https://drive.google.com/file/d/' + file.id + '/view', "", 1026, 500);
                }
            }
        );
    }

    function PopupCenter(url, title, w, h)
    {
       //.....
    }

    function FilePicker(User)
    {
        //Configuration 
        //....
    }

上面的完整版本代码可以正常运行，但偶尔会偶尔打开弹出窗口。 弹出窗口仅在刷新应用程序几次或第二天打开应用程序后触发。 Picker在Angular中无法正常运行。

Answer 1

单击此处How to implement SignIn with Google in Angular 2 using Typescript，只需在您的应用文件夹中创建index.html，您将100％解决此问题，因为我遇到了同样的问题。

Answer 2

在index.html

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

在组件模板（.html）文件中。

<button (click)="loadGoogleDrive()"><G-Drive</button>

在组件（.ts文件）中。

import { Component } from '@angular/core';
declare var gapi: any;
declare var google: any;

@Component({
  selector: 'app-selector',
  templateUrl: './app-selector.component.html',
  styleUrls: ['./app-selector.component.css']
})
export class GoogleDriveSelectorComponent {

  developerKey = 'developer/API key here';
  clientId = "client_id"
  scope = [
    'profile',
    'email',
    'https://www.googleapis.com/auth/drive'//insert scope here
  ].join(' ');
  pickerApiLoaded = false;
  oauthToken?: any;

  loadGoogleDrive() {
    gapi.load('auth', { 'callback': this.onAuthApiLoad.bind(this) });
    gapi.load('picker', { 'callback': this.onPickerApiLoad.bind(this) });
  }

  onAuthApiLoad() {
    gapi.auth.authorize(
      {
        'client_id': this.clientId,
        'scope': this.scope,
        'immediate': false
      },
      this.handleAuthResult);
  }

  onPickerApiLoad() {
    this.pickerApiLoaded = true;
  }

  handleAuthResult(authResult) {
    let src;
    if (authResult && !authResult.error) {
      if (authResult.access_token) {
        let view = new google.picker.View(google.picker.ViewId.DOCS);
        view.setMimeTypes("image/png,image/jpeg,image/jpg,video/mp4");
        let pickerBuilder = new google.picker.PickerBuilder();
        let picker = pickerBuilder.
          enableFeature(google.picker.Feature.NAV_HIDDEN).
          setOAuthToken(authResult.access_token).
          addView(view).
          addView(new google.picker.DocsUploadView()).
          setCallback(function (e) {
            if (e[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
              let doc = e[google.picker.Response.DOCUMENTS][0];
              src = doc[google.picker.Document.URL];
              console.log("Document selected is", doc,"and URL is ",src)
            }
          }).
          build();
        picker.setVisible(true);
      }
    }
  }

}

Answer 3

在Index.html

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

创建类似googleDriveService（.service.ts）的服务

import {Injectable} from '@angular/core';

declare const gapi: any;
declare const google: any;

@Injectable({
  providedIn: 'root'
})
export class GoogleDrivePickerService {

  private clientId = 'YOUR_CLIEND_ID';
  private apiKey = 'YOUR_API_KEY';
  private appId = 'YOUR_APP_ID';
  private scope: 'https://www.googleapis.com/auth/drive.file',

  private oauthAccessToken = null;
  private pickerApiLoaded = false;
  private pickerCallback = null;

  public open(callback): void {
    this.pickerCallback = callback;
    gapi.load('auth', {'callback': this.onAuthApiLoad.bind(this)});
    gapi.load('picker', {'callback': this.onPickerApiLoad.bind(this)});
  }

  private onAuthApiLoad(): void {
    gapi.auth.authorize({
      'client_id': this.clientId,
      'scope': this.scope,
      'immediate': false,
    }, this.handleAuthResult.bind(this));
  }

  private onPickerApiLoad(): void {
    this.pickerApiLoaded = true;
    this.createPicker();
  }

  private handleAuthResult(authResult): void {
    if (authResult && !authResult.error) {
      this.oauthAccessToken = authResult.access_token;
      this.createPicker();
    }
  }

  private createPicker(): void {
    if (this.pickerApiLoaded && this.oauthAccessToken) {
      let view = new google.picker.View(google.picker.ViewId.DOCS);
      let picker = new google.picker.PickerBuilder()
        .enableFeature(google.picker.Feature.NAV_HIDDEN)
        .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
        .setAppId(this.appId)
        .setOAuthToken(this.oauthAccessToken)
        .addView(view)
        .addView(new google.picker.DocsUploadView())
        .setDeveloperKey(this.apiKey)
        .setCallback(this.pickerCallback)
        .build();
      picker.setVisible(true);
    }
  }
}

在您的组件（.ts）中，导入服务并添加构造函数，然后最终通过回调调用open函数。

import {GoogleDrivePickerService} from '../services/googledrivepicker.service';

constructor(
  private googleDrivePickerService: GoogleDrivePickerService
){}

openGoogleDrivePicker(): void {
  this.googleDrivePickerService.open((data) => {
    if (data.action === 'picked') {
      console.log('Picked', data.docs);
    }
  });
}

Angular 6-Google Picker API弹出窗口

3 个答案: