离子2-如何管理全局变量

Question

情况：

在我的离子2应用中，我有一个简单的登录名，该登录形式包含在右菜单中。您单击标题中的右图图标 - 将显示带有登录表单的菜单。

登录代码在app.component内部，登录视图为app.html。成功的登录将将布尔全局变量设置为true。

目的是，每个其他组件 - 导入全局变量 - 都可以知道登录状态。

问题是 - 成功登录后，我需要立即看到更改反映了主页组件，情况并非如此。

例如，在主页上某些内容应立即在登录后立即使用。

代码：

这是我在一个名为 global.ts 的单独文件中设置全局变量的地方，然后在其他组件中导入：

export var global = {
    loginState : false
};

app.component ：

这是我导入全局变量并在成功登录后将其设置为true的应用程序组件：

import {global} from "./global";
loginSubmit()
{
    var email = this.loginForm.value.email.trim();
    var password = this.loginForm.value.password.trim();
    this.userService.submitLogin(email, password)
        .subscribe((response) => {
            if(response.result == 1) 
            {
                global.loginState = true;
                this.menu.close();
            }
        }, (error) => {
            console.log(error);
        });
}

问题：

要处理全局变量的更改的方法应该是什么？

我可以从app.component调用主页组件方法吗？

谢谢！

Answer 1

我认为您需要在服务中定义您的全局变量（又称提供商）。

这样：

import { Injectable } from '@angular/core';
@Injectable()
export class SingletonService {
  public loginState:boolean = false;
}

然后，您仅在app.module.ts文件中声明一次该服务：

...other imports...
import { SingletonService } from '../services/singleton/singleton';
@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ...
  ],
  providers: [
    ...
    SingletonService
  ]
})
export class AppModule {}

在您使用的每个离子页面上，您可以在页面上导入服务，但不要在@component part 中声明它。由于它将仅使用App.Module.ts来声明它（或不确定此处的正确词汇），因此该值将是从一个页面到另一页的全局：

import {Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SingletonService } from '../../services/singleton/singleton';
@Component({
    selector:'my-page',
    templateUrl: 'my-page.html',
})
export class MyPage {
    constructor(public navCtrl: NavController,public singleton:SingletonService){} 
}

然后在您的HTML模板（此处的my-page.html）中链接到特定页面（通过@Component），您将条件放在要显示的字段上，如果singleton.loginState == true，则会显示。

Answer 2

在离子3中，您可以使用localStorage执行此操作示例：

第1页

let page1Data = 'This is Page 1 Data';
localStorage.setItem('storedData': page1Data);

第2页

在第2页中使用此数据：

let page1Data = localStorage.getItem('storedData');
console.log(page1Data);

有关更多详细信息：https：//answerdone.blogspot.com/2018/03/how-to-toore-and-ys-data-data-globally-in.html