在 Angular 中创建一个全局服务变量 2

Question

如何将Angular2中服务中的一个变量设为全局变量，以便两个不同的组件可以访问和修改它？

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

这是服务中的地图，我最初使用组件填充它。现在，在应用程序运行一段时间后，我需要使用不同的组件访问相同的填充地图。我该怎么做？

当我使用另一个组件访问地图时，它显示为未定义。

Answer 1

在所有组件之间共享服务。在服务内部，声明一个变量，该变量将保存您要在组件之间共享的值。然后使用 getter 和 setter 从服务分配、检索或修改变量，而无需调用服务器。

这是在多个组件之间共享变量的简单 example。

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;
    }
}

在app.module.ts中添加服务供应商：

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

在component.ts中注入服务并使用它来设置、检索或修改变量。

constructor(private appService: AppService) { }

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

  showGV(){
    alert("GV: " + this.appService.getMyGV());
  }

Answer 2

Angular 服务对于您注入服务的组件下的所有组件都是单例的。

换句话说，当你在组件A中注入你的服务时，它会使用这个服务已经存在的实例，如果不存在它会创建一个实例。

因此，当所有组件都获得相同的实例时，其中的每个属性都将被共享。

在 Angular 中创建一个全局服务变量 2

Make a service variable global in Angular 2

angular2-services

angular