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

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

ОТВЕТЫ

Ответ 1

Вот простейшее решение w/o Service и Observer:

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

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

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

Чтобы использовать глобальные переменные в другом файле, используйте оператор import: 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'; //<==== this one

export class HeroesComponent implements OnInit {
    public heroes: Hero[];
    public selectedHero: Hero;
    // 
    //
    // Here we access the global var reference.
    //  
    public helloString: string="hello " + myGlobals.sep + " there";

         ...

        }
    }

Спасибо @eric-martinez

Ответ 2

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

Я также использовал Object.freeze, чтобы свойства стали истинными константами. Если вас интересует эта тема, вы можете прочитать этот 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
}

Ответ 3

Общим сервисом является наилучший подход

export class SharedService {
  globalVar:string;
}

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

bootstrap(AppComponent, [SharedService]);

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

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

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

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

Вы можете заметить, что вы также можете определить свойства 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);
  }
}

См. этот вопрос для получения дополнительной информации:

Ответ 4

Смотрите, например, Angular 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);
  }
}

Ответ 5

Создайте класс Globals в приложении /globals.ts:

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

Ответ 6

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. Если вы добавляете строку, в нее вводится только что созданный экземпляр.

Ответ 7

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

window.GlobalVariable = "what ever!"

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

Ответ 8

Вот как я это использую:

global.ts

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
}

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

Ответ 9

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

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

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

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

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

И используйте его

console.log(globalVariables);

Ответ 10

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

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

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