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

Posted 2023-03-13

【中文标题】如何在 Angular 2 组件中访问全局变量

【英文标题】：How to access global variable in Angular 2 Component

【发布时间】：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 或类似的东西了？

【参考方案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"];