ฉันจะประกาศตัวแปรทั่วโลกใน Angular 2 / Typescript ได้อย่างไร [ปิด]

ฉันต้องการให้ตัวแปรบางอย่างสามารถเข้าถึงได้ทุกที่Angular 2ในTypescriptภาษา ฉันจะทำสิ่งนี้ให้สำเร็จได้อย่างไร?

นี่คือทางออกที่ง่ายที่สุดโดยServiceไม่มีหรือObserver:

วางตัวแปรโกลบอลในไฟล์เพื่อเอ็กซ์ปอร์ต

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

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

หากต้องการใช้ globals ในไฟล์อื่นให้ใช้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 หรือ Observable ใน 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 ]ควรเพิ่มในบันทึกย่อของคุณ โดยไม่มีการเพิ่มการฉีดบรรทัดนี้จะให้คุณได้เช่นเดียวกันของ หากคุณเพิ่มบรรทัดอินสแตนซ์ที่สร้างขึ้นใหม่จะถูกฉีด@ComponentSomeSharedService

ฉันไม่ทราบวิธีที่ดีที่สุด แต่วิธีที่ง่ายที่สุดถ้าคุณต้องการกำหนดตัวแปรทั่วโลกภายในองค์ประกอบคือการใช้windowตัวแปรเพื่อเขียนดังนี้:

window.GlobalVariable = "what ever!"

คุณไม่จำเป็นต้องส่งผ่านไปยัง bootstrap หรือนำเข้าที่อื่นและมันสามารถเข้าถึงได้ทั่วโลกไปยัง 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และประกาศวัตถุ ฉันให้ประเภทวัตถุแต่คุณสามารถใช้ชนิดใดก็ได้หรือ {}

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