更改Ionic3中的rootPage后未显示选项卡 [英] Tabs not showing after changing the rootPage in Ionic3

问题描述

我使用ionicCLI和标签生成了一个离子3 app，添加了新的登录页面。我将roofrpage更改为 rootPage：any = LoginPage; ，当我加载主页时，我很遗憾地看到了标签。如何修复此错误，以便在我登录时可以看到主页和我要创建的任何其他页面以获得标签？

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

谢谢

推荐答案

在网上进行研究后，我能够弄清楚如何使用 rootPage：any = TabsPage; ，

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

然后在特定页面上隐藏选项卡。这是通过此特定页面 .ts 文件实现的，我想隐藏标签。

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

首先，我们获取标签栏元素并将其存储为变量名为 tabBarElement 。然后我们将进入NavControllers生命周期钩子。您可以在此处了解有关生命周期事件的更多信息。

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.

当要显示视图时，将调用 ionViewWillEnter（）方法，因此我们隐藏了标签栏做 this.tabBarElement.style.display ='none'; 。

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';.

同样，我们要取消隐藏标签当视图即将离开时，我们这样使用 ionViewWillLeave（），我们通过执行 this.tabBarElement将display属性设置为flex。 style.display ='flex'; ，通过这样做，我们有效地隐藏了标签栏。

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.

这篇关于更改Ionic3中的rootPage后未显示选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！