Ionic 2 - 如何管理全局变量? [英] Ionic 2 - How to manage global variables?

问题描述

情况:

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

In my Ionic 2 app i have a simple login which form is contained inside the right menu. You click on the right icon in the header - will appear the menu with the login form.

登录代码在 app.component 中，登录视图是 app.html.成功登录会将布尔全局变量 - loginState - 设置为 true.

The login code is inside the app.component and the login view is app.html. The successful login will set a boolean global variable - loginState - to true.

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

The aim is that every other component - importing the global variable - can know that login state.

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

The problem is that - after a successful login I need to see the changes immediately reflect on the homePage component and this is not the case.

例如，在主页上的某些内容应在登录后立即可供您访问.

For instance on the homepage certain content should immediately become available to you after the login.

代码:

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

This is where i set up the global variable in a separate file named global.ts that I then import in other components:

export var global = {
    loginState : false
};

app.component:

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

This is the app component where I import the global variable and set it to true after successful login:

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 组件方法吗?

Can I call a homePage component method from the app.component?

谢谢！

推荐答案

我认为您需要在服务(又名提供者)中定义全局变量.

I think you need to define your global variable in a Service (aka Provider).

像这样:

import { Injectable } from '@angular/core';

@Injectable()
export class SingletonService {
  public loginState:boolean = false;
}

然后您在 app.module.ts 文件中只声明一次该服务:

Then you declare that service only once in the app.module.ts file:

...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 中被声明(或实例化，不确定这里的词汇是否正确)一次，因此该值将从一页到另一页是全局的:

On each Ionic page you use, you import the service on top of your page but don't declare it in the @Component part. Since it'll have been declared (or instantiate, not sure about the right vocabulary here) only once with app.module.ts, the value will be global from one page to an other:

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== 真.

Then in your html template (my-page.html here) linked to a specific page (thru the @Component) you put conditional on fields you want to display if singleton.loginState == true.

这篇关于Ionic 2 - 如何管理全局变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！