情况:
在我的app.component中有登录功能。它工作正常,我从API获取用户数据。
我需要将此数据存储为全局变量,以便能够在整个应用程序中访问它。
我认为共享服务是实现这一目标的方式,但不幸的是,我的工作并不像我想象的那样。
代码:
服务:
import { Injectable } from '@angular/core';
@Injectable()
export class LoginService {
public accountInfo;
setUserData(value)
{
this.accountInfo = value;
}
getUserData() {
return this.accountInfo;
}
}
app.component:
loginSubmit()
{
// Function reduced to what is essential to the question
this.userService.submitLogin(email, password)
.subscribe((response) => {
if(response.result == 1)
{
this.loginService.setUserData(response.account_info);
var justTesting = this.loginService.getUserData();
// Getting the proper result back
console.log(justTesting);
}
}, (error) => {
console.log(error);
});
}
尝试从其他组件访问用户数据:
this.accountInfo = this.loginService.getUserData();
console.log(this.accountInfo);
结果是undefined
。可能是因为当从其他组件调用服务时,再次实例化this.accountInfo(在服务中)...
问题:
如何将一些数据存储为全局变量?可以通过共享服务来完成吗?
谢谢!
答案 0 :(得分:4)
Ionic提供了一种使用Storage
插件存储全局变量的方法。 (cordova-sqlite-storage
)。存储将尝试按此顺序使用IndexedDB
,WebSQL
和localstorage
。
首先将其添加到提供者列表中。
在src/app.module.ts
import { Storage } from '@ionic/storage';
@NgModule({
declarations: [
// ...
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
// ...
],
providers: [
Storage
]
})
export class AppModule {}
然后将其注入您的组件
import { Storage } from '@ionic/storage';
export class MyApp {
constructor(storage: Storage) {
// set a key/value
storage.set('name', 'Max');
// Or to get a key/value pair
storage.get('name').then((val) => {
console.log('Your name is', val);
})
}
}
答案 1 :(得分:4)
@Matt答案正常运行,它提供了一个很好的解决方案。
我还发现我的代码中存在的问题是:服务必须是单例。我是在组件的提供者中注入服务。
这就是问题所在,因为服务再次被实例化,因此public accountInfo
丢失了之前的内容。
您可以共享服务来存储全局变量 - 但必须是单例 - 您需要在app.module.ts中只注入一次:
providers: [ LoginService ]