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

时间:2016-03-28 22:28:50

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

我想从typescript中的angular 2模块访问google api库。 怎么做。 当我尝试访问(gapi)时,我得到了undefined。是否有任何NPM模块作为角色2中的打字稿库,我可以使用或我必须使用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;
        });
    }

};

2 个答案:

答案 0 :(得分:4)

您的代码中包含:

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

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

declare var gapi:any;

更多

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

答案 1 :(得分:0)

您可以通过引用窗口轻松访问全局变量,如此

let gapi = window["gapi"];

/flushdns