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

原创文章，欢迎转载，转载请注明出处