web-dev-qa-db-fra.com

Angular 4/5/6 Variables globales

J'ai vraiment du mal à créer des variables globales dans mon application Angular 2.

J'ai déjà googlé et lu de nombreux articles sur StackOverflow à ce sujet ces 3 dernières heures, mais il semble que je ne peux tout simplement pas le faire fonctionner. J'espère vraiment que vous pourrez m'aider et je m'excuse d'avoir posé cette question.

J'ai donc mon fichier appelé globals.ts, qui ressemble à ceci:

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


@Injectable()
export class Globals {

  var role = 'test';

}

Et je veux utiliser le rôle de variable dans ma vue HTML de mon composant comme ceci:

{{ role }}

J'ai déjà ajouté le fichier globals.ts à mon app.module.ts de la manière suivante:

providers: [
  Globals
],

Peu importe ce que j'ai fait dans ce dossier, ça n'a tout simplement pas fonctionné. Ce que je ne veux pas faire, c'est d'importer manuellement le fichier globals.ts dans chaque composant, c'est pourquoi je souhaite utiliser la fonctionnalité de fournisseur.

J'espère vraiment que vous pourrez m'aider et encore désolé.

Meilleures salutations,

Un e

angulartypescript
84
Alexander Ehrenthal

Vous pouvez accéder à Globalsà partir de n'importe quel point de votre application via injection de dépendance angulaire . Si vous souhaitez afficher la valeur Globals.role dans le modèle d'un composant, vous devez injecter Globalsvia le constructeur du composant, comme n'importe quel service:

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

J'ai fourni Globalsdans HelloComponentname__, mais il pourrait être fourni dans un composant parent HelloComponent's ou même dans AppModulename__. Peu importe jusqu'à ce que votre Globalsne contienne que des données statiques qui ne pourraient pas être modifiées (uniquement des constantes). Mais si ce n'est pas le cas et que, par exemple, différents composants/services peuvent modifier ces données, alors Globalsdoit être un singleton . Dans ce cas, il devrait être fourni au plus haut niveau de la hiérarchie où il sera utilisé. Disons qu'il s'agit de AppModulename__:

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
  ]
})

En outre, il est impossible d'utiliser var comme vous l'avez fait, cela devrait être

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

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

Mettre à jour

Enfin, j'ai créé un simple démo sur stackblitz , où le nom unique Globalsest partagé entre 3 composants et l’un d’eux peut modifier la valeur de Globals.role.

134
dhilt

J'utilise l'environnement pour ça. Cela fonctionne automatiquement et vous n'avez pas besoin de créer un nouveau service injectable et le plus utile pour moi, pas besoin d'importer via un constructeur.

1) Créer une variable d’environnement dans votre environment.ts

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

2) Import environment.ts dans un fichier * .ts et créer public variable (c'est-à-dire "env") pour pouvoir être utilisé dans un modèle html

import { environment } from 'environments/environment';

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

3) Utilisez-le dans le modèle ...

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

dans * .ts ...

env.isContentLoading = false

(ou simplement environment.isContentLoading au cas où vous n'en auriez pas besoin comme modèle)

Vous pouvez créer votre propre ensemble de globales dans environment.ts comme ceci:

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

et importer directement ces variables (y)

16
Martin Slavkovsky