Variabili globali angolari 4/5/6

116

Faccio davvero fatica a creare variabili globali nella mia applicazione Angular 2.

Ho già cercato su Google e letto molti post su StackOverflow su questo nelle ultime 3 ore, tuttavia sembra che non riesco a farlo funzionare. Spero davvero che tu possa aiutarmi e mi scuso per aver posto questa domanda.

Quindi ho il mio file chiamato globals.ts , che assomiglia a questo:

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


@Injectable()
export class Globals {

  var role = 'test';

}

E voglio usare il ruolo della variabile nella mia visualizzazione HTML del mio componente in questo modo:

{{ role }}

Ho già aggiunto il file globals.ts al mio app.module.ts nel modo seguente:

providers: [
  Globals
],

Non importa cosa ho fatto su questo file, semplicemente non ha funzionato. Quello che non voglio fare è importare manualmente il file globals.ts in ogni componente, motivo per cui voglio utilizzare la funzione provider.

Spero davvero che tu possa aiutarmi e mi dispiace di nuovo.

I migliori saluti,

AE

angular typescript

— AE
fonte

4

export class Globals { var role = 'test'; }<- che cos'è?

— zerkms

Questa dovrebbe essere la mia classe Globali in cui voglio memorizzare le mie variabili globali. Ad esempio la variabile "ruolo", che in questo momento dovrebbe contenere una stringa "test", solo per verificare se le variabili globali funzionano.

— AE

Tuttavia non è un dattiloscritto valido.

— zerkms

Devo rimuovere la "var"?

— AE

che ne dici di usare localStorage?

— suhailvs

180

Puoi accedere Globalsall'entità da qualsiasi punto della tua App tramite Angular dependency injection . Se vuoi restituire il Globals.rolevalore nel modello di qualche componente, dovresti iniettare Globalsattraverso il costruttore del componente come qualsiasi servizio:

// 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) {}
}

Ho fornito Globalsin HelloComponent, ma invece potrebbe essere fornito in alcuniHelloComponent's componente genitore o anche in AppModule. Non importerà finché non avrai Globalssolo dati statici che non possono essere modificati (ad esempio, solo costanti). Ma se non è vero e ad esempio diversi componenti / servizi potrebbero voler modificare quei dati, allora Globalsdeve essere un singleton . In tal caso, dovrebbe essere fornito nel livello più alto della gerarchia in cui verrà utilizzato. Diciamo che questo è 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
  ]
})

Inoltre, è impossibile usare var come hai fatto, dovrebbe essere

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

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

Aggiornare

Alla fine, ho creato una semplice demo su stackblitz , dove il singolo Globalsviene condiviso tra 3 componenti e uno di loro può cambiare il valore diGlobals.role .

— dhilt
fonte

3

Ma quando lo ottengo in un altro componente (qualcosa = globals.role;) ottengo "test" .. Non il valore che gli ho assegnato.

— punkouter

3

@punkouter ho aggiornato la risposta con un link demo di Plunker. Spero che ti possa aiutare!

— dhilt

3

Questo è un po 'un vecchio thread ma voglio solo dire che ti amo. Mi ha salvato la giornata!

— Nie Selam

2

@AtulStha Ho appena spostato la demo da Plunker a Stackblitz, grazie per il problema.

— dhilt

1

@ GauravSachdeva Puoi pubblicare il tuo problema come domanda separata su SO, credo che sarebbe l'opzione migliore. Aggiungi un link ad esso nei commenti se vuoi che lo veda.

— dhilt

22

Uso l'ambiente per questo. Funziona automaticamente e non è necessario creare un nuovo servizio iniettabile e molto utile per me, non è necessario importarlo tramite il costruttore.

1) Crea la variabile d'ambiente nel tuo environment.ts

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

2) Importa environment.ts nel file * .ts e crea una variabile pubblica (es. "Env") da poter utilizzare nel template html

import { environment } from 'environments/environment';

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

3) Usalo nel modello ...

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

in * .ts ...

env.isContentLoading = false

(o solo environment.isContentLoading nel caso in cui non sia necessario per il modello)

Puoi creare il tuo set di globali all'interno di environment.ts in questo modo:

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

e importa direttamente queste variabili (y)

— Martin Slavkovsky
fonte

1

E quando crei un build di produzione? Hai tutto in due posti?

— Mulperi

2

Questo è il modo migliore. @Mulperi Non è necessario creare globali in environment.ts. Basta creare un globals.ts nella directory dell'app con le esportazioni di cui sopra e importare questo file dove si desidera utilizzare quelle globali.

— PrasadW

1

Sono d'accordo. Di recente ho modificato questa soluzione esattamente come indicato da @PrasadW.

— Martin Slavkovsky

Le nuove versioni di Angular ora usano esattamente quell'approccio per impostazione predefinita. C'è un environments/environment.tse environments/environment.prod.tsche vengono sostituiti automaticamente.

— rugk

0

Non proprio consigliato, ma nessuna delle altre risposte è davvero variabile globale. Per una variabile veramente globale potresti farlo.

index.html

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

Component o qualsiasi altra cosa in Angular

..in alto a destra dopo le importazioni:

declare const myTest: any;

...dopo:

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

— Helzgate
fonte

-2

Puoi usare l'oggetto Window e accedervi ovunque. esempio window.defaultTitle = "il mio titolo"; quindi puoi accedere a window.defaultTitle senza importare nulla.

— Giustizia Addico
fonte

Questo è ciò che vuole evitare.

— Scandinava