1、背景
编写一个公共的菜单组件ContentPage,ContentPage是这个App根页面的默认页面,将首页默认为该组件的rootPage,在第一次登录时没有问题,但是退出后,再次登录就会导致menu点击不了,菜单项出不来。
<ion-menu [content]="content">
<ion-header>
<ion-toolbar color="navbar">
<ion-title>菜单</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list #mytabs>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
<ion-list>
<div style="text-align: center; margin-left: 30px; margin-right: 30px;margin-top: 30px;">
<button ion-button block color="button" (click)="logOut()">
退出登录
</button>
</div>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content></ion-nav>
2、原因
登录页面跳转使用的是this.navCtrl.push(ContentPage);来进行页面跳转,但此时ContentPage已经不是App的根页面了,导致dom覆盖,点击根页面下的menu显示不出来。
3、解决方法
登录成功后使用this.navCtrl.setRoot(ContentPage);进行跳转到默认页面。
me.navCtrl.setRoot(ContentPage);
// me.navCtrl.push(ContentPage, userinfo);