Bagaimana saya bisa mendeklarasikan variabel global dalam Angular 2 / Typescript? [Tutup]

Saya ingin beberapa variabel untuk dapat diakses di mana-mana dalam Angular 2dalam Typescriptbahasa. Bagaimana saya harus menyelesaikan ini?

Berikut adalah solusi yang paling sederhana w / o Serviceatau Observer:

Masukkan variabel global dalam file dan ekspor.

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

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

Untuk menggunakan global dalam file lain gunakan importpernyataan: import * as myGlobals from 'globals';

Contoh:

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

         ...

        }
    }

Terima kasih @ eric-martinez

Saya suka solusi dari @supercobra juga. Saya hanya ingin sedikit meningkatkannya. Jika Anda mengekspor objek yang berisi semua konstanta, Anda hanya bisa menggunakan ES6 impor modul tanpa menggunakan membutuhkan .

Saya juga menggunakan Object.freeze untuk membuat properti menjadi konstanta yang benar. Jika Anda tertarik dengan topik ini, Anda dapat membaca posting ini .

// global.ts

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

Rujuk modul menggunakan impor.

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

export class HeroService {
    private baseApiUrl = GlobalVariable.BASE_API_URL;

    //... more code
}

Layanan bersama adalah pendekatan terbaik

export class SharedService {
  globalVar:string;
}

Tetapi Anda harus sangat berhati-hati saat mendaftar untuk dapat berbagi satu contoh untuk seluruh aplikasi Anda. Anda perlu mendefinisikannya saat mendaftarkan aplikasi Anda:

bootstrap(AppComponent, [SharedService]);

tetapi tidak untuk mendefinisikannya lagi dalam providersatribut komponen Anda:

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

Kalau tidak, instance baru dari layanan Anda akan dibuat untuk komponen dan sub komponennya.

Anda dapat melihat pertanyaan ini mengenai bagaimana injeksi ketergantungan dan injektor hirarki bekerja di Angular2:

• Apa cara terbaik untuk menyuntikkan satu layanan ke layanan lain dalam angular 2 (Beta)?

Anda dapat melihat bahwa Anda juga dapat menentukan Observableproperti di layanan untuk memberi tahu bagian dari aplikasi Anda ketika properti global Anda berubah:

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

Lihat pertanyaan ini untuk lebih jelasnya:

• Delegasi: EventEmitter atau Observable in Angular2

Lihat misalnya Angular 2 - Implementasi layanan bersama

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

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

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

atau berikan nilai individual

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

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

Buat kelas Globals di app / globals.ts :

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

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

Di komponen Anda:

import { Globals } from './globals';

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

Catatan : Anda dapat menambahkan penyedia layanan Globals secara langsung ke modul alih-alih komponen, dan Anda tidak perlu menambahkan sebagai penyedia ke setiap komponen dalam modul itu.

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

IMHO untuk Angular2 (v2.2.3) cara terbaik adalah menambahkan layanan yang berisi variabel global dan menyuntikkan mereka ke dalam komponen tanpa providerstag di dalam @Componentanotasi. Dengan cara ini Anda dapat berbagi informasi antar komponen.

Layanan sampel yang memiliki variabel global:

import { Injectable } from '@angular/core'

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

Komponen sampel yang memperbarui nilai variabel global Anda:

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

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

  constructor(private someSharedService: SomeSharedService) { }

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

Komponen sampel yang membaca nilai variabel global Anda:

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

Perhatikan bahwa providers: [ SomeSharedService ]seharusnya tidak ditambahkan ke Anda @Componentpenjelasan. Dengan tidak menambahkan injeksi baris ini akan selalu memberi Anda contoh yang sama SomeSharedService. Jika Anda menambahkan baris, instance yang baru dibuat disuntikkan.

Saya tidak tahu cara terbaik, tetapi cara termudah jika Anda ingin mendefinisikan variabel global di dalam komponen adalah dengan menggunakan windowvariabel untuk menulis seperti ini:

window.GlobalVariable = "what ever!"

Anda tidak perlu meneruskannya ke bootstrap atau mengimpornya ke tempat lain, dan dapat diakses secara global ke semua JS (tidak hanya komponen sudut 2).

Itulah cara saya menggunakannya:

global.ts

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

untuk menggunakannya impor saja seperti itu:

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
}

Diedit: Droped "_" diawali seperti yang direkomendasikan.

Saya pikir cara terbaik adalah berbagi objek dengan variabel global di seluruh aplikasi Anda dengan mengekspor dan mengimpornya di tempat yang Anda inginkan.

Pertama buat file .ts baru misalnya globals.ts dan deklarasikan objek. Saya memberinya tipe Objek tetapi Anda juga bisa menggunakan tipe apa pun atau {}

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

Setelah itu impor saja

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

Dan gunakan itu

console.log(globalVariables);

Saya suka jawaban @supercobra, tetapi saya akan menggunakan kata kunci const seperti di ES6 yang sudah tersedia:

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

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