Angular 6-G Picker API从Javascript到有效TYPESCRIPT的转换

在角度应用程序中使用G选择器API在app.component.ts内部

app.component.html

按钮

assets/api script.js

/=创建FilePicker构造函数的对象函数和设置属性===
函数SetPicker（）{
var picker=新文件选择器(
{
apiKey:“”，
客户端ID:“”，
Buttonnel:document.getElementById（“AllFilePick”），
onClick:函数（文件）{
弹出中心（'https://drive.google.com/file/d/“+file.id+”/view“，”，1026500）；
}
}
);
}
//============================创建弹出功能==============
函数PopupCenter（url、标题、w、h）
{
左侧变量=（屏幕宽度/2）-（w/2）；
变量顶部=（屏幕高度/2）-（高度/2）；
返回窗口。打开（url，标题，'width='+w+'，height='+h+'，top='+top+'，left='+left）；
}
//===================创建构造函数==============
函数文件选择器（用户）
{
//配置
this.apiKey=User.apiKey；
this.clientId=User.clientId；
//钮扣
this.buttonEl=User.buttonEl；
//点击事件
this.onClick=User.onClick；
this.buttonEl.addEventListener（'click'，this.open.bind（this））；
//在加载API之前禁用该按钮，因为在此之前它将无法正常工作。
this.buttonEl.disabled=true；
//加载驱动器API
gapi.client.setApiKey（this.apiKey）；
gapi.client.load（'drive'，'v2'，this.driveapiloadded.bind（this））；
load（'picker'，'1'，{callback:this.pickeraproaded.bind（this）}）；
}
FilePicker.prototype={
//=========检查身份验证并调用ShowPicker（）函数=======
打开：函数（）{
//检查用户是否已通过身份验证
var token=gapi.auth.getToken（）；
如果（令牌）
{
this.ShowPicker（）；
} 
其他的
{
this.DoAuth（false，函数（）
{this.ShowPicker（）；}.bind（this））；
}
},
ShowPicker:函数（）{
var accessToken=gapi.auth.getToken（）.access\u token；
//=======在选择器对话框中显示不同的显示视图=======
//查看google drive的所有文档和文件夹
var DisplayView=new google.picker.DocsView（）.setIncludeFolders（true）；
//=======在选择器对话框中显示不同的上载视图=======
var UploadView=new google.picker.DocsUploadView（）.setIncludeFolders（true）；
//用户可以上传特定文件夹中的文件
this.picker=new google.picker.PickerBuilder（）。
添加视图（显示视图）。
enableFeature（google.picker.Feature.MULTISELECT\u已启用）。
setAppId（this.clientId）。
addView（上传视图）。
setOAuthToken（accessToken）。
setCallback（this.PickerResponse.bind（this））。
setTitle（'googlepickerapi-BEEP聊天应用程序'）。
build（）。
setVisible（真）；
},
//==在Google Picker对话框中选择文件时调用===
PickerResponse:函数（数据）
{
if（数据[google.picker.Response.ACTION]==google.picker.ACTION.PICKED）
{
var file=data[google.picker.Response.DOCUMENTS][0]，
id=文件[google.picker.Document.id]，
request=gapi.client.drive.files.get（{fileId:id}）；
this.ShowPicker（）；
request.execute（this.GetFileDetails.bind（this））；
}
},
//==从Google Drive检索文件详细信息时调用========
GetFileDetails:函数（文件）{
if（this.onClick）{
这个.onClick（文件）；
}
},
//==在Google驱动器文件选择器API完成加载后调用=======
pickeraproaded:函数（）{
this.buttonEl.disabled=false；
},
//=======在Google Drive API完成加载后调用==========
DriveApiLoaded:函数（）{
这是DoAuth（真的）；
},
//=======通过Google Picker API向Google Drive进行身份验证=====
DoAuth：函数（立即、回调）{
gapi.auth.authorize({
客户id:this.clientId，
范围：'https://www.googleapis.com/auth/drive',
立即的：立即的
}，回调）；
}
};

---

这段代码用于正常的多页web应用程序，但在我的例子中，当与单页应用程序集成时我无法在Angular Typescript中运行有效的Javascript代码。

您缺少装饰程序

@组件。我想知道，你为什么不重写一下呢？可以重构的东西太多了。它实际上是api-script.js，而不是app.component.ts
<a routerLink="/" id="AllFilePick" #AllFilePick> Button </a>

//=Create object of FilePicker Constructor function function & set Properties===
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);
            }
        }
    );
}

//====================Create POPUP function==============
function PopupCenter(url, title, w, h)
{
    var left = (screen.width / 2) - (w / 2);
    var top = (screen.height / 2) - (h / 2);
    return window.open(url, title, 'width=' + w + ', height=' + h + ', top=' + top + ', left=' + left); 
}

//===============Create Constructor function==============
function FilePicker(User)
{
    //Configuration 
    this.apiKey = User.apiKey;
    this.clientId = User.clientId;

    //Button
    this.buttonEl = User.buttonEl;

    //Click Events
    this.onClick = User.onClick;
    this.buttonEl.addEventListener('click', this.open.bind(this));

    //Disable the button until the API loads, as it won't work properly until then.
    this.buttonEl.disabled = true;

    //Load the drive API
    gapi.client.setApiKey(this.apiKey);
    gapi.client.load('drive', 'v2', this.DriveApiLoaded.bind(this));
    gapi.load('picker', '1', { callback: this.PickerApiLoaded.bind(this) });
}

FilePicker.prototype = {

    //==========Check Authentication & Call ShowPicker() function=======
    open: function () {
        // Check if the user has already authenticated
        var token = gapi.auth.getToken();
        if (token)
        {
            this.ShowPicker();
        } 
        else 
        {
            this.DoAuth(false, function () 
                { this.ShowPicker(); }.bind(this));
        }
    },

    ShowPicker: function () {
        var accessToken = gapi.auth.getToken().access_token;

        //========Show Different Display View in Picker Dialog box=======

        //View all the documents & folders of google drive
        var DisplayView = new google.picker.DocsView().setIncludeFolders(true);
        //========Show Different Upload View in Picker Dialog box=======
        var UploadView = new google.picker.DocsUploadView().setIncludeFolders(true);

        //User can upload file in specific folder
        this.picker = new google.picker.PickerBuilder().
            addView(DisplayView).
            enableFeature(google.picker.Feature.MULTISELECT_ENABLED).
            setAppId(this.clientId).
            addView(UploadView).
            setOAuthToken(accessToken).
            setCallback(this.PickerResponse.bind(this)).
            setTitle('Google Picker API - BEEP Chat APP').
            build().
            setVisible(true);
    },

    //====Called when a file has been selected in the Google Picker Dialog Box===
    PickerResponse: function (data) 
    {
        if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) 
        {
            var file = data[google.picker.Response.DOCUMENTS][0],
                id = file[google.picker.Document.ID],
                request = gapi.client.drive.files.get({ fileId: id });
            this.ShowPicker();
            request.execute(this.GetFileDetails.bind(this));
        }
    },

    //====Called when file details have been retrieved from Google Drive.========
    GetFileDetails: function (file) {
        if (this.onClick) {
            this.onClick(file);
        }
    },

    //====Called when the Google Drive file picker API has finished loading.=======
    PickerApiLoaded: function () {
        this.buttonEl.disabled = false;
    },

    //========Called when the Google Drive API has finished loading.==========
    DriveApiLoaded: function () {
        this.DoAuth(true);
    },

    //========Authenticate with Google Drive via the Google Picker API.=====
    DoAuth: function (immediate, callback) {
        gapi.auth.authorize({
            client_id: this.clientId,
            scope: 'https://www.googleapis.com/auth/drive',
            immediate: immediate
        }, callback);
    }
};