Làm cách nào tôi có thể khai báo một biến toàn cục trong Angular 2 / Typecript? [đóng cửa]

Tôi muốn một số biến để có thể truy cập ở khắp mọi nơi trong một Angular 2trong các Typescriptngôn ngữ. Làm thế nào tôi nên đi về việc thực hiện điều này?

Đây là giải pháp đơn giản nhất Servicecũng không phải Observer:

Đặt các biến toàn cục trong một tệp xuất chúng.

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

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

Để sử dụng toàn cầu trong một tệp khác, sử dụng một importtuyên bố: import * as myGlobals from 'globals';

Thí dụ:

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

         ...

        }
    }

Cảm ơn @ eric-martinez

Tôi cũng thích giải pháp từ @supercobra. Tôi chỉ muốn cải thiện nó một chút. Nếu bạn xuất một đối tượng chứa tất cả các hằng số, bạn chỉ cần sử dụng es6 nhập mô-đun mà không cần sử dụng yêu cầu .

Tôi cũng đã sử dụng Object.freeze để làm cho các thuộc tính trở thành hằng số thực sự. Nếu bạn quan tâm đến chủ đề này, bạn có thể đọc bài viết này .

// global.ts

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

Tham khảo mô-đun bằng cách nhập.

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

export class HeroService {
    private baseApiUrl = GlobalVariable.BASE_API_URL;

    //... more code
}

Một dịch vụ chia sẻ là cách tiếp cận tốt nhất

export class SharedService {
  globalVar:string;
}

Nhưng bạn cần phải rất cẩn thận khi đăng ký để có thể chia sẻ một ví dụ duy nhất cho toàn bộ ứng dụng của bạn. Bạn cần xác định nó khi đăng ký ứng dụng của bạn:

bootstrap(AppComponent, [SharedService]);

nhưng không xác định lại nó trong các providersthuộc tính của các thành phần của bạn:

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

Nếu không, một phiên bản mới của dịch vụ của bạn sẽ được tạo cho thành phần và các thành phần phụ của nó.

Bạn có thể xem câu hỏi này liên quan đến cách thức tiêm phụ thuộc và kim phun phân cấp hoạt động trong Angular2:

• Cách tốt nhất để tiêm một dịch vụ này vào dịch vụ khác trong góc 2 (Beta) là gì?

Bạn có thể nhận thấy rằng bạn cũng có thể xác định Observablecác thuộc tính trong dịch vụ để thông báo cho các bộ phận trong ứng dụng của bạn khi các thuộc tính toàn cầu của bạn thay đổi:

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

Xem câu hỏi này để biết thêm chi tiết:

• Phái đoàn: Sự kiện hoặc Người quan sát trong Angular2

Xem ví dụ Angular 2 - Triển khai các dịch vụ chia sẻ

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

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

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

hoặc cung cấp các giá trị riêng lẻ

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

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

Tạo lớp Globals trong ứng dụng / globalals.ts :

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

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

Trong thành phần của bạn:

import { Globals } from './globals';

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

Lưu ý : Bạn có thể thêm nhà cung cấp dịch vụ Globals trực tiếp vào mô-đun thay vì thành phần và bạn sẽ không cần thêm nhà cung cấp cho mọi thành phần trong mô-đun đó.

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

IMHO cho Angular2 (v2.2.3) cách tốt nhất là thêm các dịch vụ có chứa biến toàn cục và đưa chúng vào các thành phần mà không có providersthẻ bên trong @Componentchú thích. Bằng cách này, bạn có thể chia sẻ thông tin giữa các thành phần.

Một dịch vụ mẫu sở hữu một biến toàn cục:

import { Injectable } from '@angular/core'

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

Một thành phần mẫu cập nhật giá trị của biến toàn cục của bạn:

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

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

  constructor(private someSharedService: SomeSharedService) { }

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

Một thành phần mẫu đọc giá trị của biến toàn cục của bạn:

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

Lưu ý rằng providers: [ SomeSharedService ]nên không được bổ sung vào @Componentchú thích. Bằng cách không thêm dòng tiêm này sẽ luôn cung cấp cho bạn cùng một ví dụ SomeSharedService. Nếu bạn thêm dòng, một thể hiện mới được tạo sẽ được thêm vào.

Tôi không biết cách tốt nhất, nhưng cách dễ nhất nếu bạn muốn xác định một biến toàn cục bên trong một thành phần là sử dụng windowbiến để viết như thế này:

window.GlobalVariable = "what ever!"

bạn không cần phải chuyển nó vào bootstrap hoặc nhập nó ở những nơi khác và nó có thể truy cập toàn cầu vào tất cả các JS (không chỉ 2 thành phần góc cạnh).

Đó là cách tôi sử dụng nó:

toàn cầu

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

để sử dụng nó chỉ cần nhập như thế:

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
}

EDITED: Đã bỏ tiền tố "_" theo khuyến nghị.

Tôi nghĩ cách tốt nhất là chia sẻ một đối tượng với các biến toàn cục trong ứng dụng của bạn bằng cách xuất và nhập nó vào nơi bạn muốn.

Đầu tiên tạo một tệp .ts mới, ví dụ globalals.ts và khai báo một đối tượng. Tôi đã cung cấp cho nó một loại Đối tượng nhưng bạn cũng có thể sử dụng bất kỳ loại nào hoặc {}

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

Sau đó nhập nó

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

Và sử dụng nó

console.log(globalVariables);

Tôi thích câu trả lời của @supercobra, nhưng tôi sẽ sử dụng từ khóa const như trong ES6 đã có sẵn:

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

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