Angular 4/5/6 Variabel Global

Saya benar-benar kesulitan membuat variabel global di aplikasi Angular 2 saya.

Saya sudah mencari di Google dan membaca banyak posting di StackOverflow tentang ini selama 3 jam terakhir, namun sepertinya saya tidak bisa membuatnya berfungsi. Saya sangat berharap Anda dapat membantu saya dan saya minta maaf karena telah menanyakan pertanyaan ini.

Jadi saya memiliki file saya bernama globals.ts , yang terlihat seperti ini:

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


@Injectable()
export class Globals {

  var role = 'test';

}

Dan saya ingin menggunakan peran variabel dalam tampilan HTML dari komponen saya seperti ini:

{{ role }} 

Saya sudah menambahkan file globals.ts ke app.module.ts saya dengan cara berikut:

providers: [
  Globals
],

Tidak peduli apa yang saya lakukan pada file ini, itu tidak berhasil. Yang tidak ingin saya lakukan adalah harus mengimpor file globals.ts di setiap komponen secara manual, itulah sebabnya saya ingin menggunakan fitur penyedia.

Saya sangat berharap Anda dapat membantu saya dan minta maaf lagi.

Salam Hormat,

AE

Anda dapat mengakses Globalsentitas dari titik mana pun di Aplikasi Anda melalui injeksi ketergantungan Angular . Jika Anda ingin menghasilkan Globals.rolenilai di beberapa template komponen, Anda harus memasukkan Globalsmelalui konstruktor komponen seperti layanan apa pun:

// hello.component.ts
import { Component } from '@angular/core';
import { Globals } from './globals';

@Component({
  selector: 'hello',
  template: 'The global role is {{globals.role}}',
  providers: [ Globals ] // this depends on situation, see below
})

export class HelloComponent {
  constructor(public globals: Globals) {}
}

Saya menyediakan Globalsdi HelloComponent, tetapi sebaliknya dapat disediakan di beberapa HelloComponent'skomponen induk atau bahkan di AppModule. Tidak masalah sampai Anda Globalshanya memiliki data statis yang tidak dapat diubah (katakanlah, hanya konstanta). Tetapi jika itu tidak benar dan misalnya berbagai komponen / layanan mungkin ingin mengubah data itu, maka Globalsharus menjadi tunggal . Dalam hal ini, itu harus disediakan di tingkat paling atas dari hierarki tempat itu akan digunakan. Katakanlah ini adalah AppModule:

import { Globals } from './globals'

@NgModule({
  // ... imports, declarations etc
  providers: [
    // ... other global providers
    Globals // so do not provide it into another components/services if you want it to be a singleton
  ]
})

Juga, tidak mungkin menggunakan var seperti yang Anda lakukan, seharusnya

// globals.ts
import { Injectable } from '@angular/core';

@Injectable()
export class Globals {
  role: string = 'test';
}

Memperbarui

Akhirnya, saya membuat demo sederhana di stackblitz , di mana single Globalsdibagikan antara 3 komponen dan salah satunya dapat mengubah nilainya Globals.role.

Saya menggunakan lingkungan untuk itu. Ini bekerja secara otomatis dan Anda tidak perlu membuat layanan injeksi baru dan yang paling berguna bagi saya, tidak perlu mengimpor melalui konstruktor.

1) Buat variabel lingkungan di environment.ts Anda

export const environment = {
    ...
    // runtime variables
    isContentLoading: false,
    isDeployNeeded: false
}

2) Impor environment.ts dalam file * .ts dan buat variabel publik (yaitu "env") agar dapat digunakan dalam template html

import { environment } from 'environments/environment';

@Component(...)
export class TestComponent {
    ...
    env = environment;
}

3) Gunakan di template ...

<app-spinner *ngIf='env.isContentLoading'></app-spinner>

di * .ts ...

env.isContentLoading = false 

(atau hanya environment.isContentLoading jika Anda tidak membutuhkannya untuk template)

Anda dapat membuat kumpulan global Anda sendiri dalam environment.ts seperti ini:

export const globals = {
    isContentLoading: false,
    isDeployNeeded: false
}

dan impor langsung variabel-variabel ini (y)

Tidak sangat direkomendasikan tetapi tidak ada jawaban lain yang benar-benar variabel global. Untuk variabel yang benar-benar global, Anda dapat melakukan ini.

Index.html

<body>
  <app-root></app-root>
  <script>
    myTest = 1;
  </script>
</body>

Komponen atau apa pun di Angular

..di dekat kanan atas setelah impor:

declare const myTest: any;

...kemudian:

console.warn(myTest); // outputs '1'

Anda dapat menggunakan objek Window dan mengaksesnya di mana saja. contoh window.defaultTitle = "judul saya"; lalu Anda dapat mengakses window.defaultTitle tanpa mengimpor apapun.