Как получить доступ к глобальной переменной js в компоненте angular2

У меня есть глобальная переменная js, определенная ниже (@Url - помощник html ASP.Net MVC, он преобразуется в строковое значение):

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

Как мне получить доступ к rootVar в компоненте angular2? Я использовал службу окна в angular 1.5, есть ли аналогичный способ сделать это в angular2?

В частности, я хочу использовать эту переменную rootVar, чтобы помочь сгенерировать templateUrl в этом компоненте:

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

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

export class HomeComponent {   
    constructor( ) {  }
}

Ответы

Ответ 1

Вам необходимо обновить файл, который загружает ваше приложение для экспорта функции:

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 ) {  }
}

Ответ 2

Внутри вашего компонента вы можете ссылаться на окно для доступа к глобальным переменным следующим образом:

rootVar = window["rootVar"];

или

let rootVar = window["rootVar"];

Ответ 3

В файле компонента, определение внешнего класса компонента, объявите rootVar, и он станет доступен в конструкторе компонента:

declare var rootVar: any;

затем

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

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

Ответ 4

Другой подход заключается в том, чтобы экспортировать ваш var, например:

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

а затем импортируйте это в свой компонент

import {API_ENDPOINT }

Ответ 5

Здесь не забудьте помыть руки... Angular - это просто javascript

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

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

Это плохо по какой-то причине.. вы должны чувствовать себя плохо!

Идите и используйте эту функцию для поиска и замены window. с (<any>window).