Variables globales angulares 4/5/6

116

Realmente lucho con la creación de variables globales en mi aplicación Angular 2.

Ya busqué en Google y leí muchas publicaciones en StackOverflow sobre esto durante las últimas 3 horas, sin embargo, parece que no puedo hacer que funcione. Realmente espero que pueda ayudarme y le pido disculpas por hacer esta pregunta.

Entonces tengo mi archivo llamado globals.ts , que se ve así:

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


@Injectable()
export class Globals {

  var role = 'test';

}

Y quiero usar el rol de variable en mi vista HTML de mi componente de esta manera:

{{ role }}

Ya agregué el archivo globals.ts a mi app.module.ts de la siguiente manera:

providers: [
  Globals
],

No importa lo que hice en este archivo, simplemente no funcionó. Lo que no quiero hacer es tener que importar el archivo globals.ts en cada componente manualmente, por lo que quiero usar la función de proveedores.

Realmente espero que puedas ayudarme y lo siento de nuevo.

Atentamente,

AE

angular typescript AE
fuente
4
export class Globals { var role = 'test'; }<- ¿qué es eso?
zerkms
Se supone que es mi clase Globals en la que quiero almacenar mis variables globales. Por ejemplo, la variable "rol", que en este momento debería tener una cadena "prueba", solo para probar si las variables globales funcionan.
AE
Sin embargo, no es un texto mecanografiado válido.
zerkms
¿Debo eliminar la "var"?
AE
¿qué pasa con el uso localStorage?
suhailvs

Respuestas:

180

Puede acceder a la Globalsentidad desde cualquier punto de su aplicación a través de la inyección de dependencia angular . Si desea generar Globals.rolevalor en la plantilla de algún componente, debe inyectar a Globalstravés del constructor del componente como cualquier servicio:

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

Proporcioné Globalsen el HelloComponent, pero en su lugar podría proporcionarse en algún HelloComponent'scomponente principal o incluso en AppModule. No importará hasta que Globalssolo tenga datos estáticos que no se puedan cambiar (digamos, solo constantes). Pero si no es cierto y, por ejemplo, diferentes componentes / servicios pueden querer cambiar esos datos, entonces Globalsdebe ser un singleton . En ese caso, debe proporcionarse en el nivel superior de la jerarquía donde se utilizará. Digamos que esto es 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
  ]
})

Además, es imposible usar var de la forma en que lo hizo, debería ser

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

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

Actualizar

Por fin, creé una demostración simple en stackblitz , donde Globalsse comparte single entre 3 componentes y uno de ellos puede cambiar el valor de Globals.role.

dhilt
fuente
3
Pero cuando lo obtengo en otro componente (algo = globals.role;) obtengo 'prueba' .. No es el valor que le asigné.
punkouter
3
@punkouter Actualicé la respuesta con un enlace de demostración de Plunker. ¡Espero que te ayude!
dhilt
3
Este es un hilo algo antiguo, pero solo quiero decir que te amo. ¡Salvó mi día!
Nie Selam
2
@AtulStha Acabo de cambiar la demostración de Plunker a Stackblitz, gracias por el problema.
dhilt
1
@GauravSachdeva Puede publicar su problema como una pregunta separada en SO, creo que sería la mejor opción. Agregue un enlace en los comentarios si desea que lo vea.
dhilt
22

Yo uso el entorno para eso. Funciona automáticamente y no tiene que crear un nuevo servicio inyectable y lo más útil para mí, no es necesario importar a través del constructor.

1) Cree una variable de entorno en su entorno.

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

2) Importe environment.ts en el archivo * .ts y cree una variable pública (es decir, "env") para poder usarla en la plantilla html

import { environment } from 'environments/environment';

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

3) Úselo en la plantilla ... 

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

en * .ts ... 

env.isContentLoading = false

(o simplemente environment.isContentLoading en caso de que no lo necesite para la plantilla)

Puede crear su propio conjunto de globales dentro de environment.ts así:

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

e importar directamente estas variables (y)

Martin Slavkovsky
fuente
1
¿Qué pasa cuando construyes la producción? ¿Tienes todo en dos lugares?
Mulperi
2
Esta es la mejor forma. @Mulperi No es necesario crear globales en environment.ts. Simplemente cree un globals.ts en el directorio de la aplicación con las exportaciones anteriores e importe este archivo donde desee usar esos globales.
PrasadW
1
Estoy de acuerdo. Recientemente modifiqué esta solución exactamente como señaló @PrasadW.
Martin Slavkovsky
Las nuevas versiones de Angular usan exactamente ese enfoque por defecto ahora. Hay un environments/environment.tsy environments/environment.prod.tsque se reemplazan automáticamente.
rugk
0

No se recomienda realmente, pero ninguna de las otras respuestas son variables realmente globales. Para una variable verdaderamente global, podría hacer esto.

Index.html

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

Componente o cualquier otra cosa en Angular

..cerca de la parte superior derecha después de las importaciones:

declare const myTest: any;

...luego:

console.warn(myTest); // outputs '1'
Helzgate
fuente
-2

Puede utilizar el objeto Ventana y acceder a él desde cualquier lugar. ejemplo window.defaultTitle = "mi título"; entonces puede acceder a window.defaultTitle sin importar nada.

Justicia Addico
fuente
Eso es lo que quiere evitar.
Scandinave