2016-01-23 62 views
4

如何在Ionic 2中使用標籤隱藏導航欄?如何在Ionic 2中隱藏導航欄?

我只想隱藏在其他頁面之一中。

<ion-navbar *navbar > 
    <ion-title>Item Details</ion-title> 
</ion-navbar> 

我試過hide-nav-bar="true"但它不起作用。

+0

它的ionic2問題https://github.com/driftyco/ionic/issues/5556 – davyzhang

回答

0

嗨Ionic2有創建隱藏後退按鈕,你可以試試這個。代碼下面給出

<ion-navbar *navbar hideBackButton> 
    <ion-title>Item Details</ion-title> 
    </ion-navbar> 
+0

這隻會隱藏後退按鈕而不是隱藏整個導航欄或導航選項卡。 – Jack

0

下面是隱藏的導航欄解決方法:

//hide nav bar when we enter the page 
    onPageWillEnter() { 
     document.getElementsByTagName("ion-navbar-section")[0].style.display = "none"; 
    } 

//show nav bar when we leave the page 
    onPageDidLeave() { 
     document.getElementsByTagName("ion-navbar-section")[0].style.display = "block"; 
    } 

感謝馬庫斯 - 羅賓遜從這裏:https://github.com/driftyco/ionic/issues/5556

5

從標籤頁,你可以這樣做:

this.nav.parent.parent.setRoot(LoginPage); 

之前:

導航 - >標籤 - > SomePage的

後:

導航 - > LoginPage

導航是所有資產淨值堆疊在離子2

另外,am odal適用於您想要在新視圖中顯示列表項的詳細信息而無需導航選項卡或導航欄佔用有價值的屏幕空間的情況。

目前我不認爲有一種方法來隱藏選項卡頁面的子視圖上的標籤,而不是使用CSS。如果你決定使用CSS選項,那麼我會建議使用Angular的ngClass屬性https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html來設置一個類,而不是隱藏導航標籤或導航欄。

+1

也適用於2.0.0-rc.2 – Guus

+0

但是,這基本上意味着你不再有後退按鈕,例如,返回頁面時,你可以通過標籤點擊某些東西來顯示某個詳細信息頁面。 Imo能夠隱藏某些頁面上的選項卡將是有益的,因爲後臺功能很有用。 – Johncl

+0

@Johncl我明白你在說什麼,但是在大多數情況下,我都會更適合這種情況。肯定會有例外。 – Jack

0

另一種方法是用css來做。你可以遲到對你constructor

tabBarElement: any; 

    constructor(
    public navCtrl: NavController) { 

    if (document.querySelector('.tabbar')) { 
     this.tabBarElement = document.querySelector('.tabbar.show-tabbar'); 
    } 


    } 

    ionViewWillEnter() { 
    if (this.tabBarElement) { 
     this.tabBarElement.style.display = 'none'; 
    } 

    } 

    ionViewWillLeave() { 
    if (this.tabBarElement) { 
     this.tabBarElement.style.display = 'flex'; 
    } 

    } 
0

有點添加以下代碼黨,但是,這個工作對我來說:

page-<page-name> ion-navbar { 
    display: none !important; 
} 

這個隱藏它僅適用於特定頁面,沒有空白或保證金問題。