Question

我使用ionicCLI生成了带有标签的离子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 WITHOUT选项卡，您可以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中，您可以拥有允许用户登录的代码，并且在成功回调的情况下，您设置根并且它将加载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生命周期钩子。您可以阅读有关生命周期事件here的更多信息。

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

同样，我们希望在视图即将离开时取消隐藏标签栏元素，我们使用ionViewWillLeave()并通过执行this.tabBarElement.style.display = 'flex';将display属性设置为flex，通过执行此操作我们正在有效地隐藏标签栏。

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

2 个答案: