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

Question

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

Answer 1

Вот самое простое решение без 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"; 

     ... 

     } 
    } 

Спасибо @ Эрик-Martinez

Answer 2

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

Answer 3

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

export class SharedService { 
    globalVar:string; 
} 

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

bootstrap(AppComponent, [SharedService]); 

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

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

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

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

• What's the best way to inject one service into another in 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); 
    } 
} 

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

• Delegation: EventEmitter or Observable in Angular2

Answer 4

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

window.GlobalVariable = "what ever!"

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

Answer 5

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

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

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

Answer 6

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

Я также использовал 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 
} 

Answer 7

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

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 
     } 

Редакцией: падает на порядок "_" с префиксом, как рекомендовано.

Answer 8

Создать глобал класс в приложения/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){ 
    } 
} 

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

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

Answer 9

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

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

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

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

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

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

console.log(globalVariables); 

Answer 10

ИМХО для 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 
    } 
} 

Note that providers: [ SomeSharedService ] should not be added to your @Component annotation. By not adding this line injection will always give you the same instance of SomeSharedService . If you add the line a freshly created instance is injected.