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

【问题标题】：How to hide nav-bar with tabs in Ionic 2?如何在 Ionic 2 中隐藏带有标签的导航栏？
【发布时间】：2016-04-30 00:54:11
【问题描述】：

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

我只想将它隐藏在其中一个页面中，不包括其他页面。

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

我尝试了hide-nav-bar="true"，但它不起作用。

【问题讨论】：

它是ionic2的问题github.com/driftyco/ionic/issues/5556

标签： angular ionic2 tabs ionic3 navbar

【解决方案1】：

你可以从一个标签页做：

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

之前：

导航 -> 选项卡 -> 某页

之后：

导航 -> 登录页面

Nav 是 Ionic 2 中所有导航堆栈的根

此外，当您希望在新视图中显示列表项的详细信息而不需要导航选项卡或导航栏占用宝贵的屏幕空间时，模式也非常适用。

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

【讨论】：

也适用于 2.0.0-rc.2
但这本质上意味着您不再有后退按钮，例如返回带有您点击某些内容的选项卡的页面，例如显示一些详细信息页面。 Imo，能够隐藏某些页面上的标签将是有益的，因为返回功能很有用。
@Johncl 我明白你在说什么，但在大多数情况下，imo 模式会更适合这种情况。肯定会有例外。
是的，当现在只有一页时，我已经选择了模式，但在某些情况下，我进入了一个多页向导的东西，用户应该能够随时导航回来返回原始标签页的方式。我只是觉得他们选择对选项卡使用相同的导航堆栈有点奇怪，但也许有很多应用程序每个选项卡需要一个堆栈，而我们正在做一些不同的事情？真的不知道。

【解决方案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';
    }

  }

【讨论】：

【解决方案3】：

嗨，Ionic2 有创建隐藏返回按钮，你可以试试这个。代码如下

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

【讨论】：

这只会隐藏后退按钮，而不是隐藏整个导航栏或导航选项卡。
如果你想隐藏整个导航栏。然后删除标签

【解决方案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";
    }

感谢 marcus-robinson：https://github.com/driftyco/ionic/issues/5556

【讨论】：

【解决方案5】：

聚会有点晚了，不过，这对我有用：

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

这仅对给定页面隐藏它，没有空白或边距问题。

【讨论】：