angular2 - ionic2路由、参数传递的问题

问题描述

问 题

最近在用ionic 2开发一个小型应用，在实现登录功能遇到了问题。我是采用侧栏菜单的形式实现登录的，类似于QQ，将用户中心、设置等放在侧栏菜单里，实现登录前加载登录前的页面，登录后加载登录后的页面：

实现侧栏菜单是在src/app/app.html中

//在src/app/app.html
<ion-menu [content]="userSetting">  
    <ion-nav [root]="menuPage"></ion-nav>
</ion-menu>
<ion-nav #userSetting [root]="rootPage"></ion-nav>

在login.ts里用navCtrl.push()方法跳转到app.ts里的MyApp

//请大神忽略if 它是个认证，就是登录成功，关掉loading动画，跳转页面，时间是模拟请求加上去的
    if(USER != '') {
      setTimeout(() =>{
        loading.dismiss();
        this.navCtrl.push(MyApp);
      },5000);

用这个方法，发现能够进入到home页，但是侧栏菜单不起作用了，后来发现侧栏菜单里关联的menuPage是在一开始就加载好的，也就是从子页面push到MyApp并不能刷新侧栏菜单，所以请问大神们，这样有解决办法吗？或者有其他实现跳转侧栏菜单的方法吗？

注：navCtrl.setRoot()方法也是一样的，只是没有返回箭头。

解决方案

今天试了一天，终于是找到了一个比较不错的解决办法。一开始我想着改变<ion-nav>里的[root]的指向，发现这个绑定只能绑定一次，即如果我把一开始的menuPage绑定在[root]上，登录之后，去改变[root]的指向页面，就会报错。然后去官网查，官网的教程几笔带过，只说了基本用法，可能是忙着ionic3吧。但是发现了一个新的组件，<ion-segment>，也不能说是新的，我之前也有用过，它是实现一个页面内实现类似于JQuery做的新闻导航栏那样的效果，于是：

//那个分栏导航的按钮，注意它上面的绑定事件
<div>
      <ion-segment [(ngModel)]="UcHeader">
        <ion-segment-button value="isLogined">
            登录的
        </ion-segment-button>
        <ion-segment-button value="unLogin">
              未登录
        </ion-segment-button>
      </ion-segment>
</div>
//把它放在content上面，就被挡住了，以后再研究怎么隐藏代码
<ion-content>
<div [ngSwitch]="UcHeader">
    <ion-list *ngSwitchCase="'isLogined'">
        //登录的
    </ion-list>
    <ion-list *ngSwitchCase="'unLogin'">
        //没登陆的
    </ion-list>
</div>
</ion-content>

在对应ts页面里：

@Component({
。。。。
})export class Page{
UcHeader: string = "unLogin";      //这个是默认选中哪个选项卡
constructor（...）{...}
    ionViewWillLoad(){        //我用的是这个周期
        let user = this.storageService.read<userInfo>('UserInfo');  //读取本地数据
        
        if(user != null) {        //判断
          this.UcHeader = "isLogined";        //改变值，即改变默认选项卡
        }else {
            this.events.subscribe('isLogined',() =>{        //登录页面那里有一个事件发布，这里来订阅，然后改变值
            this.UcHeader = "isLogined";
              });      
        }

          

}

}

这样就实现了我在侧栏菜单的登录比较好的登录跳转方案。ionic的坑踩不完，我也只是初学者，有不妥的地方欢迎指正，或是大家有什么更好的方案欢迎前来讨论。

这篇关于angular2 - ionic2路由、参数传递的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！