如何在angular2组件中访问全局js变量

Question

我在下面定义了一个全局js变量（@Url是ASP.Net MVC html帮助程序，它将转换为字符串值）：

<script>
  var rootVar = '@Url.Action("Index","Home",new { Area = ""}, null)';
  System.import('app').catch(function(err){ console.error(err); });
</script>

如何访问angular2组件中的rootVar？我曾经在Angular1.5中使用窗口服务，在angular2中有类似的方法吗？

具体来说，我想使用该rootVar变量来帮助在该组件中生成templateUrl：

import { Component, Inject} from '@angular/core';

@Component({
    selector: 'home-comp',
    templateUrl: '../Home/Root'
})

export class HomeComponent {   
    constructor( ) {  }
}

Answer 1

在组件文件中，在组件类定义之外，声明rootVar，它将在组件构造函数中变得可用：

declare var rootVar: any;

然后

@Component(...)
export class MyComponent {
  private a: any;

  constructor() {
    this.a = rootVar;
  }
}

Answer 2

您需要更新引导应用程序的文件以导出函数：

import {bootstrap} from '...';
import {provide} from '...';
import {AppComponent} from '...';

export function main(rootVar) {
  bootstrap(AppComponent, [
    provide('rootVar', { useValue: rootVar })
  ]);
}

现在，您可以通过以下方式提供index.html文件中的变量：

<script>
  var rootVar = '@Url.Action("Index","Home",new { Area = ""}, null)';
  System.import('app/main').then((module) => {
    module.main(rootVar);
  });
</script>

然后，您可以通过以下方式将rootVar注入到组件和服务中：

import { Component, Inject} from '@angular/core';

@Component({
  selector: 'home-comp',
  templateUrl: '../Home/Root'
})
export class HomeComponent {   
  constructor(@Inject('rootVar') rootVar:string ) {  }
}

Answer 3

在您的组件中，您可以引用窗口来访问全局变量，如下所示：

rootVar = window["rootVar"];

或者

let rootVar = window["rootVar"];