在我的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 here)链接到特定页面(通过@Component),如果singleton.loginState == true,则将条件放在要显示的字段上.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。