Как объявить глобальную переменную в Angular 2 / Typescript?

Я хочу, чтобы некоторые переменные были доступны везде в Angular 2 на языке Typescript. Как мне этого добиться?

Jeff
Редактировал вопрос 12-го мая 2019 в 1:01
Программирование
angular typescript
22-го марта 2016 в 3:40
73 просмотров
Комментарии к вопросу (3)
Решение

Вот простейшее решение без Service и Observer:

Поместите глобальные переменные в файл и экспортируйте их.

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

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

Чтобы использовать глобальные переменные в другом файле, используйте оператор импорта: import * as myGlobals from './globals';.

Пример:


// 
// ===== File heroes.component.ts    
//
import {Component, OnInit} from 'angular2/core';
import {Router} from 'angular2/router';
import {HeroService} from './hero.service';
import {HeroDetailComponent} from './hero-detail.component';
import {Hero} from './hero';
import * as myGlobals from './globals'; //
snorkpete
Редактировал ответ 6-го мая 2017 в 5:13
Комментарии (11)

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

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

// 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
}
Tim Hong
Редактировал ответ 2-го апреля 2017 в 3:38
Комментарии (6)

Совместная служба - лучший подход

export class SharedService {
  globalVar:string;
}

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

bootstrap(AppComponent, [SharedService]);

но не определять его снова в атрибутах providers ваших компонентов:

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

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

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

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

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

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

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

Более подробную информацию смотрите в этом вопросе:

Community
Редактировал ответ 23-го мая 2017 в 12:18
Комментарии (5)

См. например https://stackoverflow.com/questions/35993778/angular-2-implementation-of-shared-services

@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);
  }
}
Demodave
Редактировал ответ 15-го февраля 2018 в 2:46
Комментарии (8)

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

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

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

@NgModule({
    imports: [...],
    declarations: [...],
    providers: [ Globals ],
    bootstrap: [ AppComponent ]
})
export class AppModule {
}
Комментарии (3)

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

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

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

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

Комментарии (3)

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

окна.GlobalVariable = "что-нибудь!"в

вы Don'т нужна, чтобы передать его в Bootstrap или импортировать его из других мест, и это доступно в глобальном масштабе для всех JS (не только угловые 2 компонентов).

Комментарии (6)

Что's пути я использую это:

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

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'; //
Ferie
Редактировал ответ 25-го апреля 2019 в 5:21
Комментарии (1)

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

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

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

После этого импортировать его

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

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

console.log(globalVariables);
Community
Редактировал ответ 23-го мая 2017 в 11:33
Комментарии (0)

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

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

export const sep='/';
export const version: string="22.2.2";
Комментарии (0)