能够偶尔访问一次Google Picker。当我打开应用程序时,并非每次都打开Google Picker Popup。
我正在Angular 6中实现Google Picker API。
我将单独的文件用于在Angular的Assets文件夹中连接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(用于附加脚本标签的构造函数)。
Assets /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中无法正常工作。
最佳答案
在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);
}
}
}
}