在Ionic3中更改rootPage后未显示选项卡

Question

I generated an ionic 3 app using ionicCLI with tabs, added new page for login. I changed the the roofrpage to rootPage:any = LoginPage; , when I load the home page unfortunately I can see the tabs. How can I fix this error so that when I login I can be able to see the Homepage and any other pages that I will create to have the tabs?

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';
import { LoginPage } from '../pages/login/login';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  //For it to load login first
  rootPage:any = LoginPage;
  //rootPage:any = TabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

Thanks

Answer 1

In order to see the tabs, you have to set the rootPage to TabsPage . The TabsPage is kind of like a wrapper around the pages that you have inside the tabs.ts . So if you want to display the HomePage WITHOUT tabs, you would do this.rootPage = HomePage , if you want to have tabs you have to do this.rootPage = TabsPage .

Usually what you want to do is assign the LoginPage when the user first opens the app and isn't logged in. (That way there will be no tabs, which is good because the user is not logged in and shouldn't be able to navigate). After a successful login, you set this.rootPage = TabsPage . That will replace the current view with your tabs view. If you want to change the tabs / pages that are available here, you have to edit your tabs page here https://github.com/ionic-team/ionic2-starter-tabs/blob/master/src/pages/tabs/tabs.ts

EDIT:

To make it clearer. You can also set the rootPage using this.nav.setRoot(TabsPage); . So in your LoginPage you can have code that lets the user log in and in case of a successful callback, you set the root and it will load the HomePage (first tab on your TabsPage)

Answer 2

After doing research online I was able to figure out how to use rootPage:any = TabsPage; ,

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';
import { LoginPage } from '../pages/login/login';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = TabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

Then on the specific page hide the tabs. This was achieved by this in that specific page .ts file I would like to hide the tab.

  tabBarElement: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.tabBarElement = document.querySelector('.tabbar.show-tabbar');
  }

  ionViewWillEnter(){
    this.tabBarElement.style.display = 'none';
  }

  ionViewWillLeave(){
    this.tabBarElement.style.display = 'flex';
  }

First of all, we are getting the tab bar element and storing it a variable called tabBarElement . Then we are hooking into the NavControllers lifecycle hooks. You can read more on lifecycle events here .

The ionViewWillEnter() method will be called when the view is about to be shown so we are hiding the tab bar by doing this.tabBarElement.style.display = 'none'; .

Similarly, we want to unhide the tab bar element when the view is about to leave, we so that using ionViewWillLeave() and we set the display property to flex by doing this.tabBarElement.style.display = 'flex'; , By doing just this we are hiding the tab bar effectively.