Açısal 2 / Daktilo Yazısı'nda genel bir değişkeni nasıl bildirebilirim? [kapalı]

Bir de her yerde erişilebilir olması için bazı değişkenler istiyorum Angular 2içinde Typescriptdilin. Bunu nasıl başarabilirim?

Burada w / o basit çözüm Servicede Observer:

Genel değişkenleri bir dosyaya dışa aktarın.

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

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

Globalleri başka bir dosyada kullanmak için bir importifade kullanın : import * as myGlobals from 'globals';

Misal:

// 
// ===== 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";

         ...

        }
    }

Teşekkürler @ eric-martinez

@Supercobra'nın çözümünü de seviyorum. Sadece biraz geliştirmek istiyorum. Tüm sabitleri içeren bir nesneyi dışa aktarırsanız , es6 modülünü zorunlu olarak kullanmadan içe aktarabilirsiniz .

Ayrıca özellikleri gerçek sabitleri haline getirmek için Object.freeze kullandım. Konuya ilgi duyan varsa, bunu okuyabilir yazı .

// global.ts

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

İçe aktarmayı kullanarak modüle bakın.

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

export class HeroService {
    private baseApiUrl = GlobalVariable.BASE_API_URL;

    //... more code
}

Paylaşılan hizmet en iyi yaklaşımdır

export class SharedService {
  globalVar:string;
}

Ancak, başvurunuz için tek bir örneği paylaşabilmek için kaydolurken çok dikkatli olmanız gerekir. Başvurunuzu kaydederken tanımlamanız gerekir:

bootstrap(AppComponent, [SharedService]);

ancak providersbileşenlerinizin nitelikleri dahilinde tekrar tanımlamak için :

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

Aksi takdirde, bileşen ve alt bileşenleri için hizmetinizin yeni bir örneği oluşturulur.

Angular2'de bağımlılık enjeksiyonu ve hiyerarşik enjektörlerin nasıl çalıştığı ile ilgili bu soruya göz atabilirsiniz:

• Açısal 2'de (Beta) bir hizmeti diğerine enjekte etmenin en iyi yolu nedir?

Genel Observableözellikleriniz değiştiğinde, uygulamanızın bazı bölümlerini bildirmek için hizmette özellikler de tanımlayabileceğinizi fark edebilirsiniz :

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

Daha fazla ayrıntı için bu soruya bakın:

• Delegasyon: EventEmitter veya Angular2'de Gözlemlenebilir

Örneğin bkz. Açısal 2 - Paylaşılan hizmetlerin uygulanması

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

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

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

veya bireysel değerler sağlayın

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

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

App / globals.ts'de Globals sınıfı oluşturun :

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

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

Bileşeninizde:

import { Globals } from './globals';

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

Not : Globals servis sağlayıcısını bileşen yerine doğrudan modüle ekleyebilirsiniz ve bu modüldeki her bileşene sağlayıcı olarak eklemenize gerek yoktur.

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

Angular2 için IMHO (v2.2.3) en iyi yol, global değişkeni içeren hizmetleri eklemek ve bunları ek açıklama providersiçinde etiketi olmadan bileşenlere enjekte etmektir @Component. Bu şekilde bileşenler arasında bilgi paylaşabilirsiniz.

Genel değişkene sahip örnek bir hizmet :

import { Injectable } from '@angular/core'

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

Global değişkeninizin değerini güncelleyen örnek bir bileşen :

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

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

  constructor(private someSharedService: SomeSharedService) { }

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

Global değişkeninizin değerini okuyan örnek bir bileşen :

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

Not providers: [ SomeSharedService ]edilmelidir değil sizin eklenecek @Componentek açıklama. Bu satırı eklemediğinizde enjeksiyon her zaman aynı örneğini verecektir SomeSharedService. Satırı eklerseniz yeni oluşturulan bir örnek enjekte edilir.

En iyi yolu bilmiyorum, ancak bir bileşenin içinde genel bir değişken tanımlamak istiyorsanız en kolay yolu, windowdeğişken bu şekilde yazmak için kullanmaktır :

window.GlobalVariable = "what ever!"

önyükleme veya başka yerlere aktarmanız gerekmez ve tüm JS (yalnızca açısal 2 bileşenler için değil) tüm dünyaya erişilebilir durumdadır.

Ben bu şekilde kullanıyorum:

global.ts

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

kullanmak için sadece şu şekilde içe aktarın:

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
}

DÜZENLENDİ: Önerildiği gibi ön ekli "_" damlatıldı.

Bence en iyi yol, bir nesneyi uygulamanız boyunca global değişkenlerle paylaşmak ve istediğiniz yere aktarmaktır.

Önce globals.ts gibi yeni bir .ts dosyası oluşturun ve bir nesne bildirin . Bir Nesne türü verdim, ancak herhangi bir türü veya {}

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

Bundan sonra içe aktarın

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

Ve kullan

console.log(globalVariables);

@Supercobra cevabını beğendim, ancak zaten mevcut ES6'da olduğu gibi const anahtar sözcüğünü kullanırdım:

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

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