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

如何在Angular 2中的服务中将变量作为全局变量创建，以便两个不同的组件可以访问和修改它？在Angular 2中创建全局服务变量

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

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

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

来源

2017-08-03 in_the_making_always

您是否在两个组件之间分享了您的服务？ –

1.在服务器中的每个组件中获取数据。 2.一次获取数据，存储在本地存储中，再次获取数据时更新存储。 –

如何在组件之间共享服务？ –

在所有组件之间共享服务。在服务内部，声明一个变量，它将保存要在组件之间共享的值。然后使用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()); 
    }

来源

2017-08-03 12:13:19 Nehal

这正是我正在做的，但力度工作。 –

在上面的例子中，我可以有另一个访问变量myGlobalVar的组件吗？ –

如果不查看代码，无法真正了解它为什么不能工作。确保你已经在'app.module.ts'' providers'中添加了服务，而不是在每个组件中单独添加。对于上面的示例，您可以拥有尽可能多的组件来共享服务，同样，您可以注入服务并使用get和set方法。以下是一个[示例]（https://plnkr.co/edit/FWoNtfE4ic3Hi6RdCMsc?p=info），其中服务由六个组件共享。 – Nehal

对于注入服务的组件以下的所有组件，角度服务是单例服务。

换言之，当您在组件A中注入服务时，它将采用此服务的已经存在的实例，如果不存在，它将不会存在，它将创建一个实例。

所以当所有的组件都得到相同的实例时，它内部的每个属性都将被共享。

来源

2017-08-03 12:58:18 Nour

你是什么意思在组件下面？我使用的两个组件完全不相关。 –

对不起，我们的意思是当我们将服务定义为模块中的提供者时，它将成为属于该模块的所有组件的单例。 – Nour

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

回答

相关问题