如何在Ionic 2中隱藏帶有標簽的導航欄？

Question

如何在Ionic 2中隱藏帶有標簽的導航欄？

我只想將其隱藏在其中一個頁面中，而不包括其他頁面。

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

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

Answer 1

從標簽頁中您可以執行以下操作：

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

之前：

導航 - >標簽 - > somepage

后：

導航 - > LoginPage

Nav是Ionic 2中所有導航堆棧的根

此外，模式適用於您希望在新視圖中顯示列表項的詳細信息但沒有導航選項卡或導航欄占用寶貴屏幕空間的情況。

目前我認為除了使用CSS之外，還有一種方法可以在選項卡頁面的子視圖上隱藏選項卡。 如果您決定使用CSS選項，那么我建議使用Angular的ngClass屬性https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html設置一個類而不是隱藏導航標簽或導航欄。

Answer 2

另一種方法是用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';
    }

  }

Answer 3

你好Ionic2有創建隱藏后退按鈕你可以試試這個。 代碼如下

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

Answer 4

這是隱藏導航欄的解決方法：

//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

Answer 5

然而，有點晚了，這對我有用：

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

這僅隱藏給定頁面，沒有空格或邊距問題。