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

<强>之前：

导航 - ＆gt;标签 - ＆gt; SomePage的

<强>后：

导航 - ＆gt; 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;
}

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

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

5 个答案: