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

另一种方法是导出你的var，例如：

  export var API_ENDPOINT = '@Url.Action("Index","Home",new { Area = ""}, null)';

然后在组件中导入

import {API_ENDPOINT }

Answer 5

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

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

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

出于某种原因这很糟糕......你应该心疼！

Answer 6

在HTML模板中，您可以使用方法get

<span>{{getGlobalData('rootVar')}}</span>

并在组件中创建方法，例如：

get getGlobalData() {
    // Closure workaround
    return function(rootVarName) {
        return window[rootVarName];
    }
}

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

6 个答案: