page - title angular 6

Angular 4/5/6 Variables globales

Question

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 simplemente no puedo hacer que funcione. Realmente espero que me puedan ayudar y me disculpo 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 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 de forma manual, por eso quiero usar la función de proveedores.

Realmente espero que me puedan ayudar y lo siento de nuevo.

Atentamente,

AE

Answer 1

Puede acceder a la entidad Globals desde cualquier punto de su aplicación a través de la inyección de dependencia angular . Si desea Globals.role valor Globals.role en la plantilla de algún componente, debe inyectar Globals 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 HelloComponent , pero en su lugar podría proporcionarse en algún componente principal HelloComponent''s o incluso en AppModule . No importará hasta que sus Globals solo tengan datos estáticos que no se puedan cambiar (solo constantes). Pero si no es cierto y, por ejemplo, diferentes componentes / servicios pueden cambiar esos datos, entonces los Globals deben ser un singleton . En ese caso, debe proporcionarse en el nivel superior de la jerarquía donde se va a 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 como lo hiciste, debería ser

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

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

Actualizar

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

Answer 2

Yo uso el medio ambiente 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) Crea una variable de entorno en tu environment.ts

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 usar 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 del entorno. De esta manera:

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

e importar directamente estas variables (y)