更改 Ionic 3 中的根页面后选项卡未显示答案

【问题标题】：Tabs not showing after changing the rootPage in Ionic3更改 Ionic 3 中的根页面后选项卡未显示
【发布时间】：2017-07-19 12:07:29
【问题描述】：

我使用带有选项卡的 ionicCLI 生成了一个 ionic 3 应用程序，添加了新的登录页面。我将屋顶页面更改为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();
    });
  }
}

谢谢

【问题讨论】：

把你的代码放在这里

标签： angular tabs ionic2 ionic3

【解决方案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 上的第一个选项卡）

【讨论】：

如果我设置 this.rootPage = TabsPage 它将直接加载到主页，这不是我想要的。我希望它先加载身份验证，然后在成功登录后将用户定向到带有标签的主页。
您必须在用户成功登录后执行this.rootPage = TabsPage。例如，如果您从 API 获得成功响应。
@Andreas Gassmann 结合这篇文章的标题，当我做 .setRoot(TabsSet2);仅显示 TabsSet2.html 中设置的默认页面，但不显示新的选项卡集（图标+它们链接到的页面），第一组保持在视图中。如何加载一组不同的选项卡？谢谢。

【解决方案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() 并通过this.tabBarElement.style.display = 'flex'; 将显示属性设置为flex，这样做我们隐藏了标签栏有效。

【讨论】：