在 Ionic 3 中更改根页面后选项卡不显示

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 中页面的包装。所以如果你想显示没有标签的主页，你会做 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); 设置 rootPage。因此，在您的 LoginPage 中，您可以拥有让用户登录的代码，如果回调成功，您可以设置根目录，它将加载主页（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 生命周期挂钩。您可以阅读有关生命周期事件的更多信息 here.

ionViewWillEnter() 方法将在视图即将显示时调用，因此我们通过 this.tabBarElement.style.display = 'none';.

隐藏标签栏

同样，我们想在视图即将离开时取消隐藏标签栏元素，我们使用 ionViewWillLeave() 并通过执行 [=18= 将显示属性设置为 flex ], 通过这样做，我们有效地隐藏了标签栏。

在 Ionic 3 中更改根页面后选项卡不显示

Tabs not showing after changing the rootPage in Ionic3

tabs

ionic2

ionic3

angular