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

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

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屋！