如何访问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？我曾经在角度1.5中使用窗口服务,在angular2中有类似的方法吗？

具体来说,我想使用该rootVar变量来帮助生成此组件中的templateUrl:

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

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

export class HomeComponent {   
    constructor( ) {  }
}

Answer 1

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

rootVar = window["rootVar"];

要么

let rootVar = window["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,它将在组件构造函数中可用:

declare var rootVar: any;

然后

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

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

Answer 4

在这里不要忘记洗手...... Angular 只是 javascript

//Get something from global
let someStuffFromWindow= (<any>window).somethingOnWindow;

//Set something
(<any>window).somethingOnWindow="Stuff From Angular";

出于某种原因，这很糟糕..你应该感到难过！

来吧，使用查找和替换机能的研究为window.用(<any>window).