Bagaimana saya dapat mendeklarasikan variabel global dalam Sudut 2 / Ketangkasan?

Saya ingin beberapa variabel yang dapat diakses di mana-mana dalam Sudut 2 dalam Naskah itu. Bagaimana saya harus pergi tentang melakukan hal ini?

Jeff
Pertanyaan edit 12 Mei 2019 в 1:01
Pemrograman
angular typescript
22 Maret 2016 в 3:40
38 tayangan
Mengomentari pertanyaan (3)
Larutan

Berikut ini adalah solusi sederhana w/o Service atau Pengamat:

Menempatkan variabel global dalam file ekspor mereka.

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

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

Untuk menggunakan globals di file lain menggunakan impor pernyataan: impor * sebagai myGlobals dari './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'; //
snorkpete
Jawaban edit 6 Mei 2017 в 5:13
Komentar (11)

Aku suka solusi dari @supercobra juga. Saya hanya ingin meningkatkan sedikit. Jika anda mengekspor sebuah obyek yang berisi semua konstanta, anda hanya bisa menggunakan es6 impor modul tanpa menggunakan membutuhkan.

Saya juga menggunakan Objek.freeze untuk membuat properti menjadi benar konstanta. Jika anda tertarik pada topik ini, anda bisa baca ini posting.

// global.ts

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

Lihat 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
}
Tim Hong
Jawaban edit 2 April 2017 в 3:38
Komentar (6)

Layanan adalah pendekatan yang terbaik

export class SharedService {
  globalVar:string;
}

Tapi anda harus sangat berhati-hati ketika mendaftar untuk dapat berbagi satu contoh untuk seluruh aplikasi. Anda perlu menentukan ketika mendaftarkan aplikasi anda:

bootstrap(AppComponent, [SharedService]);

tapi tidak menentukan lagi dalam penyedia atribut dari komponen anda:

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

Jika sebuah instance baru dari layanan anda akan dibuat untuk komponen dan sub komponen.

Anda bisa melihat-lihat di pertanyaan ini mengenai bagaimana dependency injection dan hirarkis injektor bekerja di Angular2:

Anda dapat melihat bahwa anda juga dapat menentukan Diamati properties dalam pelayanan untuk memberitahukan bagian-bagian dari aplikasi anda ketika anda global sifat perubahan:

export class SharedService {
  globalVar:string;
  globalVarUpdate:Observable;
  globalVarObserver:Observer;

  constructor() {
    this.globalVarUpdate = Observable.create((observer:Observer) => {
      this.globalVarObserver = observer;
    });
  }

  updateGlobalVar(newValue:string) {
    this.globalVar = newValue;
    this.globalVarObserver.next(this.globalVar);
  }
}

Melihat pertanyaan ini untuk lebih jelasnya:

Community
Jawaban edit 23 Mei 2017 в 12:18
Komentar (5)

Lihat misalnya https://stackoverflow.com/questions/35993778/angular-2-implementation-of-shared-services

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

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

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

atau memberikan nilai-nilai individu

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

class MyComponent {
  constructor(@Inject('myConfigValue') private myConfigValue:string) {
    console.log(myConfigValue);
  }
}
Demodave
Jawaban edit 15 Februari 2018 в 2:46
Komentar (8)

Membuat Globals di kelas aplikasi/globals.ts:

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

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

Dalam 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 Globals penyedia layanan langsung ke modul komponen, dan anda tidak akan perlu menambahkan sebagai penyedia untuk setiap komponen dalam modul tersebut.

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

IMHO untuk Angular2 (v2.2.3) cara terbaik adalah untuk menambahkan layanan yang berisi variabel global dan menyuntikkannya ke dalam komponen tanpa penyedia tag di dalam @Komponen penjelasan. Dengan cara ini anda dapat berbagi informasi antara komponen.

Contoh layanan yang memiliki variabel global:

import { Injectable } from '@angular/core'

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

Contoh komponen yang update nilai variabel global:

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

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

  constructor(private someSharedService: SomeSharedService) { }

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

Contoh komponen yang membaca nilai variabel global:

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 penyedia: [ SomeSharedService ] harus tidak **** dapat ditambahkan ke @Komponen penjelasan. Dengan tidak menambahkan baris ini injeksi akan selalu memberikan anda contoh sama SomeSharedService. Jika anda menambahkan baris baru dibuat contoh disuntikkan.

Komentar (3)

Saya don't tahu cara terbaik, tapi cara termudah jika anda ingin mendefinisikan variabel global dalam komponen adalah dengan menggunakan jendela variabel untuk menulis seperti ini:

jendela.GlobalVariable = "apa yang pernah!"

anda don't perlu untuk lulus untuk bootstrap atau mengimpor tempat-tempat lain, dan itu mudah di akses secara global untuk semua JS (tidak hanya sudut 2 komponen).

Komentar (6)

Yang's cara yang saya gunakan:

global.ts

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

untuk menggunakannya hanya impor 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'; //
Ferie
Jawaban edit 25 April 2019 в 5:21
Komentar (1)

Saya pikir cara terbaik adalah untuk berbagi sebuah objek dengan variabel global di seluruh aplikasi anda dengan mengekspor dan mengimpor mana yang anda inginkan.

Pertama membuat yang baru .ts file misalnya globals.ts dan menyatakan suatu objek. Aku memberikannya sebuah Obyek jenis tapi anda juga bisa menggunakan setiap jenis atau {}

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

Setelah itu impor

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

Dan menggunakannya

console.log(globalVariables);
Community
Jawaban edit 23 Mei 2017 в 11:33
Komentar (0)

Saya suka jawaban dari @supercobra, tapi aku akan menggunakan kata kunci const seperti di ES6 sudah tersedia:

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

export const sep='/';
export const version: string="22.2.2";
Komentar (0)