Як я можу оголосити глобальну змінну у Angular 2 / Typescript? [зачинено]

Я хотів би деякі змінні повинні бути доступні скрізь в Angular 2в Typescriptмові. Як я повинен іти до досягнення цього?

Ось найпростіше рішення без 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 (**Updated**)

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

Мені подобається рішення від @supercobra. Я просто хотів би трохи її покращити. Якщо ви експортуєте об'єкт, який містить усі константи, ви можете просто використовувати імпорт es6 модуля, не використовуючи потребу .

Я також використовував Object.freeze, щоб властивості стали справжніми константами. Якщо вас цікавить тема, ви можете прочитати цю публікацію .

// 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:

• Який найкращий спосіб ввести одну службу в іншу в куті 2 (бета-версія)?

Ви можете помітити, що ви також можете визначити 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

Дивіться, наприклад, 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);
  }
}

Створіть клас Globals у app / 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 {
}

Найкращим способом 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!"

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

Ось так я і використовую:

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
}

ВИДАЛЕНО: Видалено "_" префікс, як рекомендовано.

Я думаю, що найкращий спосіб - поділитися об'єктом із глобальними змінними у всій програмі, експортуючи та імпортуючи його там, де ви хочете.

Спочатку створіть новий .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);

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

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

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