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);