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

问题描述：

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

以我离子2的应用程序我有形式被包含在正确的菜单内的简单的登录。您点击标题右侧的图标 - 将出现带登录表单的菜单。

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

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

问题是，在成功登录后，我需要看到立即反映在homePage组件上的变化，事实并非如此。

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

守则：

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

export var global = { 
    loginState : false 
};

应用。组件：

这是应用程序组件，其中我导入全局变量并在成功完成后将其设置为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组件方法吗？

谢谢！

答

我认为你需要在一个服务（aka Provider）中定义你的全局变量。

就像是：

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部分中声明它。因为它已经被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。

谢谢回答。我最后也有类似的情况。登录成功后，我设置了这个。 SingletonService.loginState = true;如果日志我可以看到它被正确设置为true。但是在HomePage组件中并没有体现出这种变化。 – johnnyfittizio

我还没牛逼试图执行你的具体情况，不过我见过不少帖子说建议使用服务进行全局变量在离子2 - 我敢肯定你会too-看到它，并开始使用它我。同样到目前为止，我没有遇到需要将我的视图更新为全局变化的情况，就像您似乎在寻找的那样。 – nyluje

对不起。你的回答是正确的。有我在执行它的一个错误，因为在构造函数中有一个第二通道loginData：= singletonService.loginState这当然被称为只有一次。但是singletonService.loginState确实正确地反映了这些变化。无论是在视图还是在逻辑上。谢谢！ – johnnyfittizio

答

离子3可以使用localStorage来执行此操作示例：

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

使用本地存储在这种情况下并不理想。因为你必须处理持久性的异步性质。所以这可能会使代码无理由复杂化。 –

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

相关推荐