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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了离子2 - 如何管理全局变量?相关的知识,希望对你有一定的参考价值。

情况:

在我的Ionic 2应用程序中,我有一个简单的登录,其中包含在右侧菜单中。单击标题中的右侧图标 - 将显示带有登录表单的菜单。

登录代码位于app.component内,登录视图为app.html。成功登录会将布尔全局变量 - loginState - 设置为true。

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

问题是 - 在成功登录后,我需要看到更改立即反映在homePage组件上,但事实并非如此。

例如,在主页上,登录后应立即为您提供某些内容。

代码:

这是我在一个名为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组件方法吗?

谢谢!

答案

我认为您需要在服务(也称为提供者)中定义您的全局变量。

像那样:

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

然后在你的html模板(my-page.html这里)链接到一个特定的页面(通过@Component)你把条件放在你想要显示的字段singleton.loginState == true

另一答案

在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

以上是关于离子2 - 如何管理全局变量?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用Android片段管理器传递变量[重复]

离子配置服务(如何导入)

R Shiny中是否存在全局变量?

片段 - 全局视图变量与本地和内部类侦听器和内存泄漏

如何通过角度代码操纵离子组件的样式

JS作用域作用域链