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

Question

我使用带有选项卡的ionicCLI生成了ionic 3应用程序，并添加了用于登录的新页面。 我将Roofrpage更改为rootPage:any = LoginPage; ，不幸的是，当我加载主页时，我可以看到选项卡。 如何解决此错误，以便在登录时可以看到主页以及将创建的带有标签的任何其他页面？

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

谢谢

Answer 1

为了查看选项卡，必须将rootPage设置为TabsPage 。 TabsPage有点像tabs.ts内的页面的包装。 因此，如果要显示没有标签的HomePage，则应执行this.rootPage = HomePage ，如果要具有标签，则必须执行this.rootPage = TabsPage 。

通常，您要做的是在用户首次打开应用程序且未登录时为其分配LoginPage。（这样就不会有选项卡，这很好，因为用户尚未登录并且不应该能够导航）。 成功登录后，设置this.rootPage = TabsPage 。 这样会将当前视图替换为选项卡视图。 如果要更改此处可用的选项卡/页面，则必须在此处编辑选项卡页面https://github.com/ionic-team/ionic2-starter-tabs/blob/master/src/pages/tabs/ tabs.ts

编辑：

使其更清楚。 您还可以使用this.nav.setRoot(TabsPage);设置this.nav.setRoot(TabsPage); 。 因此，在LoginPage中，您可以使用允许用户登录的代码，并在成功回调的情况下，设置根目录，它将加载HomePage（TabsPage上的第一个标签）

Answer 2

在线研究之后，我能够弄清楚如何使用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文件中实现的。

  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生命周期挂钩。 您可以在此处阅读有关生命周期事件的更多信息 。

当视图将要显示时，将调用ionViewWillEnter()方法，因此我们通过执行this.tabBarElement.style.display = 'none';来隐藏标签栏this.tabBarElement.style.display = 'none'; 。

同样，我们要在视图即将离开时取消隐藏选项卡栏元素，因此，我们使用ionViewWillLeave()并通过执行this.tabBarElement.style.display = 'flex';将display属性设置为flex this.tabBarElement.style.display = 'flex'; 通过这样做，我们有效地隐藏了标签栏。