在Angular 2中创建全局服务变量
如何在Angular 2中的服务中将变量作为全局变量创建,以便两个不同的组件可以访问和修改它?在Angular 2中创建全局服务变量
public myMap : Map<string, string> = new Map<string, string>();
这是服务中的地图,我最初使用组件填充它。现在,在应用程序的一段时间后,我需要使用不同的组件访问相同的填充地图。我怎样才能做到这一点?
当我使用另一个组件访问地图时,它显示为未定义。
在所有组件之间共享服务。在服务内部,声明一个变量,它将保存要在组件之间共享的值。然后使用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());
}
这正是我正在做的,但力度工作。 –
在上面的例子中,我可以有另一个访问变量myGlobalVar的组件吗? –
如果不查看代码,无法真正了解它为什么不能工作。确保你已经在'app.module.ts'' providers'中添加了服务,而不是在每个组件中单独添加。对于上面的示例,您可以拥有尽可能多的组件来共享服务,同样,您可以注入服务并使用get和set方法。以下是一个[示例](https://plnkr.co/edit/FWoNtfE4ic3Hi6RdCMsc?p=info),其中服务由六个组件共享。 – Nehal
对于注入服务的组件以下的所有组件,角度服务是单例服务。
换言之,当您在组件A中注入服务时,它将采用此服务的已经存在的实例,如果不存在,它将不会存在,它将创建一个实例 。
所以当所有的组件都得到相同的实例时,它内部的每个属性都将被共享。
你是什么意思在组件下面?我使用的两个组件完全不相关。 –
对不起,我们的意思是当我们将服务定义为模块中的提供者时,它将成为属于该模块的所有组件的单例。 – Nour
您是否在两个组件之间分享了您的服务? –
1.在服务器中的每个组件中获取数据。 2.一次获取数据,存储在本地存储中,再次获取数据时更新存储。 –
如何在组件之间共享服务? –