Variables globales d'Angular 4/5/6

Question

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

J'ai donc un 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 la variable dans la vue HTML de mon composant comme ceci :

{{ role }} 

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

providers: [
  Globals
],

Peu importe ce que j'ai fait sur ce fichier, ça n'a pas marché. Je ne veux pas avoir à importer manuellement le fichier globals.ts dans chaque composant, c'est pourquoi je veux utiliser la fonctionnalité des fournisseurs.

Answer 1

Vous pouvez accéder à Globals à partir de n'importe quel point de votre application via Injection de dépendances Angular . Si vous voulez produire Globals.role dans le modèle d'un composant, vous devez injecter la valeur Globals par le biais du 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(public globals: Globals) {}
}

J'ai fourni Globals dans le HelloComponent mais au lieu de cela, elle pourrait être fournie dans une HelloComponent's parent ou même dans AppModule . Cela n'aura pas d'importance jusqu'à ce que votre Globals n'a que des données statiques qui ne peuvent pas être modifiées (disons, uniquement des constantes). Mais si ce n'est pas le cas et que, par exemple, différents composants/services peuvent vouloir modifier ces données, alors la fonction Globals doit être un singleton . Dans ce cas, il doit être fourni au niveau le plus élevé de la hiérarchie où il va être utilisé. Disons que c'est 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
  ]
})

De plus, il est impossible d'utiliser var de la façon dont tu l'as fait, ça devrait être

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

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

Mise à jour

Enfin, j'ai créé un simple démo sur stackblitz où simple Globals est partagé entre 3 composants et l'un d'entre eux peut changer la valeur de Globals.role .

Answer 2

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

1) Créez une variable d'environnement dans votre environnement.ts

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

2) Importez environment.ts dans le fichier *.ts et créer public variable (c'est-à-dire "env") pour pouvoir l'utiliser dans le modèle html

import { environment } from 'environments/environment';

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

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

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

dans *.ts ...

env.isContentLoading = false 

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

---

Vous pouvez créer votre propre ensemble de globaux dans environment.ts comme suit :

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

et d'importer directement ces variables (y)

Answer 3

Alors que toutes les autres réponses mentionnées précédemment sont correctes. La méthode Angular consiste à utiliser des tuyaux, des décorateurs ou des composants.

Si vous souhaitez simplement afficher une chaîne de caractères, utilisez un composant

Composant

<Role></Role>

Décorateur

Si vous voulez faire quelque chose comme ça :

<a href="http://stackoverflow.com/foo/{{userId}}/bar">Link</a>

Vous pouvez implémenter votre propre décorateur

<a [customHref]="[/foo/:userId/bar]">Link</a>

ou si vous utilisez le module routeur intégré avec routerlink, vous pouvez simplement étendre la directive RouterLink et mettre en œuvre vos modifications.

Tuyau

somevariable = "this is my #:userId";

{{someVariable | applyglobals}}

Et ainsi de suite.

Answer 4

Pas vraiment recommandé, mais aucune des autres réponses n'est vraiment une variable globale. Pour une variable vraiment globale, vous pourriez faire ceci.

Index.html

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

Composant ou autre dans Angular

en haut à droite après les importations :

declare const myTest: any;

...plus tard :

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

Answer 5

Vous pouvez utiliser l'objet Window et y accéder partout. exemple window.defaultTitle = "mon titre" ; vous pouvez alors accéder à window.defaultTitle sans importer quoi que ce soit.