Каков наилучший способ объявить глобальную переменную в Angular 2 / Typescript [закрыто]

мне тоже нравится решение от @supercobra. Я просто хотел бы немного улучшить его. Если вы экспортируете объект, который содержит все константы, вы можете просто использовать es6 импорт модуль без использования требуются.

Я также использовал объект.заморозьте, чтобы свойства стали истинными константами. Если вы заинтересованы в теме, вы можете прочитать это post.

// global.ts

 export const GlobalVariable = Object.freeze({
     BASE_API_URL: 'http://example.com/',
     //... more of your variables
 });

обратитесь к модулю с помощью импорта.

//anotherfile.ts that refers to global constants
import { GlobalVariable } from './path/global';

export class HeroService {
    private baseApiUrl = GlobalVariable.BASE_API_URL;

    //... more code
}

общий сервис-это лучший подход

export class SharedService {
  globalVar:string;
}

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

bootstrap(AppComponent, [SharedService]);

но не определить его в providers атрибуты компонентов:

@Component({
  (...)
  providers: [ SharedService ], // No
  (...)
})

в противном случае для компонента и его субкомпонента будет создан новый экземпляр службы комплектующие.

вы можете взглянуть на этот вопрос относительно того, как инъекция зависимостей и иерархические инжекторы работают в Angular2:

• каков наилучший способ введения одной службы в другую в angular 2 (Beta)?

вы можете заметить, что вы также можете определить Observable свойства в Службе для уведомления частей приложения при изменении глобальных свойств:

export class SharedService {
  globalVar:string;
  globalVarUpdate:Observable<string>;
  globalVarObserver:Observer;

  constructor() {
    this.globalVarUpdate = Observable.create((observer:Observer) => {
      this.globalVarObserver = observer;
    });
  }

  updateGlobalVar(newValue:string) {
    this.globalVar = newValue;
    this.globalVarObserver.next(this.globalVar);
  }
}

смотрите этот вопрос подробнее подробности:

• делегирование: EventEmitter или наблюдаемый в Angular2

см., например,угловой 2-реализация общих сервисов

@Injectable() 
export class MyGlobals {
  readonly myConfigValue:string = 'abc';
}

@NgModule({
  providers: [MyGlobals],
  ...
})

class MyComponent {
  constructor(private myGlobals:MyGlobals) {
    console.log(myGlobals.myConfigValue);
  }
}

или предоставить отдельные значения

@NgModule({
  providers: [{provide: 'myConfigValue', useValue: 'abc'}],
  ...
})

class MyComponent {
  constructor(@Inject('myConfigValue') private myConfigValue:string) {
    console.log(myConfigValue);
  }
}

создать класс Globals в приложения/глобалы.ТС:

import { Injectable } from '@angular/core';

Injectable()
export class Globals{
    VAR1 = 'value1';
    VAR2 = 'value2';
}

в компоненте:

import { Globals } from './globals';

@Component({
    selector: 'my-app',
    providers: [ Globals ],
    template: `<h1>My Component {{globals.VAR1}}<h1/>`
})
export class AppComponent {
    constructor(private globals: Globals){
    }
}

Примечание: вы можете добавить поставщика услуг Globals непосредственно в модуль вместо компонента, и вам не нужно будет добавлять в качестве поставщика каждый компонент в этом модуле.

@NgModule({
    imports: [...],
    declarations: [...],
    providers: [ Globals ],
    bootstrap: [ AppComponent ]
})
export class AppModule {
}

IMHO для Angular2 (v2.2.3) лучший способ-добавить сервисы, содержащие глобальную переменную, и внедрить их в компоненты без providers бирка внутри @Component Примечание. Таким образом, вы можете обмениваться информацией между компонентами.

пример сервиса, который принадлежит глобальная переменная:

import { Injectable } from '@angular/core'

@Injectable()
export class SomeSharedService {
  public globalVar = '';
}

образец компонента,обновления значение глобальной переменной:

import { SomeSharedService } from '../services/index';

@Component({
  templateUrl: '...'
})
export class UpdatingComponent {

  constructor(private someSharedService: SomeSharedService) { }

  updateValue() {
    this.someSharedService.globalVar = 'updated value';
  }
}

образец компонента это читает значение глобальной переменной:

import { SomeSharedService } from '../services/index';

@Component({
  templateUrl: '...'
})
export class ReadingComponent {

  constructor(private someSharedService: SomeSharedService) { }

  readValue() {
    let valueReadOut = this.someSharedService.globalVar;
    // do something with the value read out
  }
}

отметим, что providers: [ SomeSharedService ] должны не будет добавлен в ваш @Component Примечание. Не добавляя эту строку инъекции всегда будет давать вам тот же экземпляр SomeSharedService. При добавлении строки вводится только что созданный экземпляр.

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

window.GlobalVariable = "what ever!"

вам не нужно передавать его в bootstrap или импортировать его в другие места, и он глобально доступен для всех JS (а не только для угловых компонентов 2).

вот как я его использую:

глобальные.ТС

 export var   server: string = 'http://localhost:4200/';
 export var   var2 : number = 2;
 export var   var3 : string = 'var3';

чтобы использовать его просто импортировать так:

  import {Injectable} from "@angular/core";
     import {Http, Headers, RequestOptions} from "@angular/http";
     import {Observable} from "rxjs/Rx";

     import * as glob from "../shared/global"; //<== HERE

     @Injectable()
     export class AuthService {
          private AuhtorizationServer = glob.server
        }

редактировать: Отброшено " _ " с префиксом, как рекомендуется.

Я думаю, что лучший способ-поделиться объектом с глобальными переменными во всем вашем приложении, экспортируя и импортируя его туда, где вы хотите.

создать новый .ТС например глобалы.ТС и объявить объект. Я дал ему объект тип, но вы также можете использовать любой тип или {}

export let globalVariables: Object = {
 version: '1.3.3.7',
 author: '0x1ad2',
 everything: 42
};

после этого импортируйте его

import {globalVariables} from "path/to/your/globals.ts"

и использовать его

console.log(globalVariables);

Мне нравится ответ @supercobra, но я бы использовал ключевое слово const, как это уже доступно в ES6:

//
// ===== File globals.ts    
//
'use strict';

export const sep='/';
export const version: string="22.2.2";