在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'; 通過這樣做，我們有效地隱藏了標簽欄。