Angular 6 - Google Picker API 弹出窗口

Question

只能偶尔访问 Google Picker。每次打开应用程序时，Google Picker Popup 都不会打开。

我正在 Angular 6 中实现 Google Picker API。我在 angular 的资产文件夹中为连接 Google API 背后的逻辑保留了单独的文件，并在 document.createElement("script") 的帮助下附加了 javascript 文件。我在 app.component.html 中有一个指向 getElementById 的 Anchor 标记。

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

在 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) 文件中。

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

在组件（.ts 文件）中。

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

Answer 2

单击此处如何使用 Typescript 在 Angular 2 中实现 SignIn with Google ，只需在应用程序文件夹中创建 index.html，您将 100% 解决这个问题，因为我也遇到了同样的问题。