在更改Ionic3中的rootPage後沒有顯示標籤

我使用帶有標籤的ionicCLI生成了離子3應用程序，添加了登錄頁面。我將屋頂頁面改爲rootPage:any = LoginPage;，當我加載主頁不幸的是我可以看到標籤。我如何解決這個錯誤，以便當我登錄時，我可以看到主頁和我將創建的任何其他頁面以獲得標籤？在更改Ionic3中的rootPage後沒有顯示標籤

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

感謝

來源

2017-07-16 Gerald Brigen

把你的代碼放在這裏 –

在網上做了研究之後，瞭解如何使用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';，這樣做只是這一點，我們有效地隱藏標籤欄彎曲。

來源

2017-07-19 04:07:29

爲了看標籤，你必須設置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中，你可以擁有允許用戶登錄的代碼，並且在回調成功的情況下，你設置了root並且它會加載主頁（你的TabsPage上的第一個選項卡）

來源

2017-07-16 15:26:31

如果我設置this.rootPage = TabsPage它將直接加載到主頁，這不是我正在尋找的..我希望它先加載認證，然後成功登錄後，用戶被定向到主頁與標籤。 –

只有在用戶成功登錄後，才必須執行'this.rootPage = TabsPage'。例如，如果您從API獲得成功響應。 –

我用另一種解釋更新了我的答案。 –

在更改Ionic3中的rootPage後沒有顯示標籤

回答

相關問題