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()方法也是一样的,只是没有返回箭头。

阅读 6.7k
1 个回答

今天试了一天,终于是找到了一个比较不错的解决办法。一开始我想着改变<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的坑踩不完,我也只是初学者,有不妥的地方欢迎指正,或是大家有什么更好的方案欢迎前来讨论。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进