Javascript Angular 6-Google Picker API弹出窗口

只能偶尔访问一次Google Picker。Google Picker弹出窗口并不是每次我打开应用程序时都会打开

我正在Angular 6中实现Google Picker API。 我在angular的assets文件夹中为连接GoogleAPI的逻辑保留了单独的文件，并在document.createElement（“脚本”）的帮助下附加了javascript文件。 我在app.component.html中有一个指向getElementById的锚定标记

app.component.html

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

按钮

应用程序组件.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);

      }
    }

从'@angular/core'导入{Component，ViewChild，ElementRef，OnInit}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.scss']
})
导出类AppComponent实现OnInit{
@ViewChild（'AllFilePick'）AllFilePick:ElementRef；
构造函数（私有elementRef:elementRef）{}
ngOnInit（）{
var s1=document.createElement（“脚本”）；
s1.type=“text/javascript”；
s1.src=“../assets/api script.js”；
this.elementRef.nativeElement.appendChild（s1）；
var s2=document.createElement（“脚本”）；
s2.src=”https://www.google.com/jsapi?key=";
this.elementRef.nativeElement.appendChild（s2）；
var s3=document.createElement（“脚本”）；
s3.src=”https://apis.google.com/js/client.js?onload=SetPicker";
this.elementRef.nativeElement.appendChild（s3）；
//log（this.AllFilePick.nativeElement）；
控制台日志（s1）；
控制台日志（s2）；
控制台日志（s3）；
}
}

我甚至尝试使用ngAfterViewInit，构造函数来附加脚本标记。

assets/api script.js

    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);

      }
    }

函数SetPicker（）{
var picker=新文件选择器(
{
apiKey:“”，
客户端ID:“”，
Buttonnel:document.getElementById（“AllFilePick”），
onClick:函数（文件）{
弹出中心（'https://drive.google.com/file/d/“+file.id+”/view“，”，1026500）；
}
}
);
}
函数PopupCenter（url、标题、w、h）
{
//.....
}
函数文件选择器（用户）
{
//配置
//....
}

上面的完整版本代码运行正常，但弹出窗口很少打开，偶尔打开一次。 只有在多次刷新应用程序或第二天打开应用程序后才会触发弹出窗口。Picker不能正常工作。

单击此处，在应用程序文件夹中创建index.html，您将100%解决此问题，因为我也遇到过同样的问题

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）文件中

Index.html中的

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

在组件（.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);
    }
  });
}

如果您认为这是您提供链接的问题的重复问题，请使用标志按钮将其标记为重复问题。
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);
    }
  });
}