4

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

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

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

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

4

5 回答 5

6

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

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来设置一个类而不是隐藏导航选项卡或导航栏。

于 2016-08-31T14:13:00.943 回答
1

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

  }
于 2017-01-16T12:10:15.713 回答
0

然而，派对有点晚了，这对我有用：

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

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

于 2017-09-28T13:52:11.987 回答
0

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

<ion-navbar *navbar hideBackButton>
    <ion-title>Item Details</ion-title>
   </ion-navbar>
于 2016-04-07T08:25:30.453 回答
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";
    }

从这里归功于 marcus-robinson：https ://github.com/driftyco/ionic/issues/5556

于 2016-05-08T23:58:19.453 回答