如何在 Ionic 2 中隐藏带标签的导航栏？

Question

我只想隐藏在其中一个页面不包含其他页面。

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

我已经试过了hide-nav-bar="true"但是还是不行。

Answer 1

嗨，Ionic2 有创建隐藏后退按钮，您可以试试这个。代码如下

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

Answer 2

这是隐藏导航栏的解决方法：

//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";
    }

此处归功于 marcus-robinson：https://github.com/driftyco/ionic/issues/5556

Answer 3

在标签页中，您可以执行以下操作：

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

之前:

导航 -> 选项卡 -> 某个页面

之后：

导航 -> 登录页面

Nav is the root of all nav stacks in Ionic 2

此外，模式适用于您希望在新视图中显示列表项的详细信息而无需导航选项卡或导航栏占用宝贵屏幕的情况 space。

目前我认为除了使用 CSS 之外，没有其他方法可以在选项卡页面的子视图中隐藏选项卡。如果您决定使用 CSS 选项，那么我建议使用 Angular 的 ngClass 属性 https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html 来设置一个 class 来隐藏导航选项卡或导航栏。

Answer 4

另一种方法是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 5

聚会有点晚了，但是，这对我有用：

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

这仅针对给定的页面隐藏它，没有白色-space 或边距问题。

如何在 Ionic 2 中隐藏带标签的导航栏？

How to hide nav-bar with tabs in Ionic 2?

tabs

navbar

ionic2

ionic3

angular