Ionic3新頁面去除Tabs的菜單問題總結

問題

要求在【我的】頁面，點擊【退出登錄】按鈕，返回到登錄頁面。

使用 this.navCtrl.setRoot(LoginPage); 或者 this.navCtrl.push(LoginPage); 方法，會導致登錄頁的下面也變成了Tabs的選項卡，相當於是在Tabs的View中展示了一個新頁面

 

 

走的彎路

1、修改成使用 modalCtrl.create 的方法，返回了登錄頁並且沒有了Tabs的菜單，但是點擊手機自帶的返回按鈕，還是會返回的內部頁面，不符合要求

let modal = this.modalCtrl.create(LoginPage);
modal.present();

 

2、Tabs類型的，都會有一個app.html 頁面，這個頁面里只有一句話

<ion-nav [root]="rootPage"></ion-nav>

在app.component.ts 文件里，可以直接這么使用 

rootPage: any;
login(){
  this.rootPage = LoginPage;
}

如果在退出登錄頁面，也能這么使用就好了，但事實證明，根本獲取不到 rootPage這個對象

 

3、先把所有頁面都pop出去，然后再設置一個root頁面

this.navCtrl.popAll();
this.navCtrl.setRoot(LoginPage);

ERROR Error: Uncaught (in promise): navigation stack needs at least one root page

把LoginPage設置為rootPage，嘗試僅僅pop()一個頁面和嘗試popToRoot()，都會報上面這個錯

 

最終解決

在Tabs中注冊一個返回登錄頁得Events事件，通過Events返回首頁

tabs.ts 中添加：

constructor(private nav: NavController, private events: Events) {
}

ionViewDidLoad() {
  this.listenEvents();
  // console.log('界面創建');
}

ionViewWillUnload() {
  this.events.unsubscribe('toLogin');
  // console.log('界面銷毀');
}

listenEvents() {
  this.events.subscribe('toLogin', () => {
    this.nav.setRoot(LoginPage);
    // this.nav.pop(); 使用這種方式也可以，但是會在登錄框中默認填上值
    // console.log('返回登錄');
  });
}

 

點擊【退出登錄】按鈕觸發的事件是

logout() {
  this.events.publish('toLogin');
}

 

原創文章，歡迎轉載，轉載請注明出處