Ionic 2 - 如何管理全局变量？

Question

情况：

在我的 Ionic 2 应用程序中，我有一个简单的登录，该表单包含在右侧菜单中。您单击标题中的右侧图标 - 将出现带有登录表单的菜单。

登录代码在 app.component 内部，登录视图是 app.html。 成功登录会将一个布尔全局变量 - loginState - 设置为 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 调用 homePage 组件方法？

谢谢！

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

在您使用的每个 Ionic 页面上，您在页面顶部导入服务但不要在@Component 部分中声明它。由于它只会使用 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){} 
}

然后在链接到特定页面（通过@Component）的 html 模板（此处为my-page.html）中，如果singleton.loginState == true，则根据要显示的字段设置条件。

Answer 2

在 Ionic 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-store-and-use-data-globally-in.html