如何在 Angular 2 组件中访问全局变量答案

【问题标题】：How to access global variable in Angular 2 Component如何在 Angular 2 组件中访问全局变量
【发布时间】：2016-07-16 07:10:31
【问题描述】：

我想从 typescript 中的 angular 2 模块访问 google api 库。怎么做。当我尝试访问（gapi）时，我得到了未定义的。是否有任何 NPM 模块可以用作 angular 2 中的 typescript 库，我可以使用或者我必须使用 js 文件。

以下是模块代码和库参考：

 <script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>

    @Component({

    selector: "main-app",
    template: "{{title}}",
    providers: [HTTP_PROVIDERS, AuthService]

})
export class AppComponent implements OnInit {
    public title: string = '';
    constructor(private _authService: AuthService) {
        var gapi: any;
        console.log(gapi); // undefined
    }
    ngOnInit() {

        this._authService.getAuthSettings().subscribe((set: AppSetting) => {
            this.title = set.Scopes;
        });
    }

};

【问题讨论】：

如果可能的话，也许将 google api 安装为 npm，然后只需要它。
你也可以直接导出它。
require 可以在 asp.net mvc 5 应用程序中工作吗？
它是 commonjs，可以在任何地方工作。因为您可能已经在使用 webpack 或类似的东西了？

标签： angularjs node.js asp.net-mvc-5 typescript google-api

【解决方案1】：

你的代码中有：

    var gapi: any;
    console.log(gapi); // undefined

var gapi 行在运行时创建一个新的局部变量。您不想创建局部变量。您想声明一个全局存在。创建一个globals.d.ts 文件并向其中添加以下内容：

declare var gapi:any;

JavaScript 到 TypeScript 迁移指南：https://basarat.gitbooks.io/typescript/content/docs/types/migrating.html

【讨论】：

【解决方案2】：

您可以通过引用窗口轻松访问全局变量，就像这样

gapi = window["gapi"];

或

let gapi = window["gapi"];

【讨论】：

更多