Rendre un service à la variable globale dans Angulaire 2

Comment puis-je créer une variable dans un service Angulaire 2 comme une variable globale, de sorte que deux éléments différents peuvent accéder et modifier?

public myMap : Map<string, string> = new Map<string, string>();

Ceci est la carte dans le service et je suis l'alimenter à l'aide d'un composant. Maintenant, après un certain temps dans l'application, j'ai besoin d'accéder à la même peuplée de la carte en utilisant un composant différent. Comment puis-je faire cela?

Lorsque j'accède à la carte à l'aide d'un autre composant, il s'affiche comme indéfini.

  • Avez-vous partagé votre service entre les deux composants?
  • 1. Récupérer les données de chaque composant dans le serveur. 2. Extraire des données à la fois, les stocker dans des locaux de stockage, de mise à jour de stockage lors de l'extraction de données à nouveau.
  • Comment puis-je partager le service parmi les composants?
  • Je ne veux pas aller chercher des données dans chaque composante, qui est pourquoi j'ai créé une Carte de façon à ce que la base de données n'est pas frappé deux fois et l'accès aux données sera plus rapide.
InformationsquelleAutor i_code | 2017-08-03
  1. 9

    Ont un service partagé entre tous les composants. À l'intérieur du service, de déclarer une variable qui contiendra la valeur que vous souhaitez partager entre les composants. Ensuite, utilisez les méthodes getter et setter de céder, de récupérer ou de modifier la variable de service sans faire appel au serveur.

    Ici est un simple exemple de partage d'une variable entre plusieurs composants.

    shared.service.ts:

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

@Injectable()
export class AppService{
    myGlobalVar;

    constructor(){
      this.myGlobalVar = true;
      alert("My intial global variable value is: " + this.myGlobalVar);
    }

    setMyGV(val: boolean){
      this.myGlobalVar = val;
    }

    getMyGV(val: boolean){
      return this.myGlobalVar;
    }
}

    Ajouter le service en app.module.ts Fournisseurs:

    @NgModule({
  ...
  providers: [ AppService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

    Dans component.ts injecter le service et l'utiliser pour définir, de récupérer ou modifier la variable.

    constructor(private appService: AppService) { }

  changeGV(val){
    this.appService.setMyGV(val);
  }

  showGV(){
    alert("GV: " + this.appService.getMyGV());
  }
    • C'est exactement ce que je fais, mais à force de travailler dehors.
    • Dans l'exemple ci-dessus, puis-je avoir un autre composant qui accède à la variable myGlobalVar?
    • Ne peut pas vraiment dire pourquoi sa ne fonctionne pas sans regarder le code. Assurez-vous que vous avez ajouté le service en app.module.ts providers, PAS individuellement dans chaque composante. Et pour l'exemple ci-dessus, vous pouvez avoir autant de composant que vous souhaitez partager le service, de ses la même manière, vous pouvez injecter le service et d'utiliser les méthodes get et set. Voici un exemple là où le service est partagé par six composantes.
    • Ok, j'ai compris. Si le service sera injecté en privé ou en public? Aussi comment le secteur privé ou le public qui l'affectent?
    • Habituellement, les services sont injectés comme private. Vous pouvez lire à ce sujet public vs private ici
    InformationsquelleAutor Nehal
  2. 5

    Angulaire de service est un singleton pour tous les composants ci-dessous du composant lorsque vous injectez votre service.

    En d'autres mots, lorsque vous injectez à votre service dans Un Composant, il faudra déjà existé instance de ce service, si ce n'est ce n'est pas existé, il va créer
    une instance.

    Quand tous les composants de la même instance, tous les biens à l'intérieur de ceux-ci seront partagés pour eux.

    • Qu'entendez-vous par-dessous le composant? Les deux composants que j'utilise sont totalement indépendants.
    • Désolé je veux dire lorsque nous définissons le service en tant que fournisseur dans le module, il sera un singleton pour tous les composants qui appartiennent à ce module.
    InformationsquelleAutor Nour