Variables Globales Angulares 4/5/6

Realmente me cuesta crear 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 me disculpo por hacer esta pregunta.

Así que 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 variable en mi vista HTML de mi componente como esto: 

{{ role }}

Ya he añadido los globales.archivo ts a mi aplicación.módulo.ts de la siguiente manera:

providers: [
  Globals
],

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

Realmente espero que pueda ayudarme y lo siento de nuevo.

Saludos cordiales,

A E

Author: dhilt, 2017-05-16
Source

2 answers

Puede acceder a la entidad Globals desde cualquier punto de su aplicación a través de Inyección de dependencia angular. Si desea generar Globals.role valor en la plantilla de algún componente, debe inyectar Globals a travé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(private globals: Globals) {}
}

Proporcioné Globals en el HelloComponent, pero en su lugar podría proporcionarse en algún componente padre HelloComponent's o incluso en AppModule. No importará hasta que su Globals tenga solo datos estáticos que no se puedan cambiar (solo constantes). Pero si es no es verdadero y por ejemplo diferentes componentes / servicios pueden cambiar esos datos, entonces el Globals debe ser un singleton. En ese caso, debe proporcionarse en el nivel más alto de la jerarquía donde se va a usar. 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 como lo hiciste, debería ser{[18]]} 

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

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

Update

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

 91
Author: dhilt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-04 16:18:52

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

1) Cree una variable de entorno en su entorno .ts 

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

2) Importar entorno.ts en *.ts file y crear public variable (es decir, "env") para poder usar en la plantilla html

import { environment } from 'environments/environment';

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

3) Utilícelo en la plantilla... 

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

En *.ts ... 

env.isContentLoading = false

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

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

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

E importar directamente estas variables (y)

 4
Author: Martin Slavkovsky,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-03 08:39:45