如何在Ionic 2中隐藏导航栏？

问题描述：

我只想隐藏在其他页面之一中。

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

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

它的ionic2问题https://github.com/driftyco/ionic/issues/5556 – davyzhang

答

嗨Ionic2有创建隐藏后退按钮，你可以试试这个。代码下面给出

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

这只会隐藏后退按钮而不是隐藏整个导航栏或导航选项卡。 – Jack

答

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

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

答

从标签页，你可以这样做：

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

之前：

导航 - >标签 - > SomePage的

后：

导航 - > LoginPage

导航是所有资产净值堆叠在离子2
根

另外，am odal适用于您想要在新视图中显示列表项的详细信息而无需导航选项卡或导航栏占用有价值的屏幕空间的情况。

目前我不认为有一种方法来隐藏选项卡页面的子视图上的标签，而不是使用CSS。如果你决定使用CSS选项，那么我会建议使用Angular的ngClass属性https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html来设置一个类，而不是隐藏导航标签或导航栏。

也适用于2.0.0-rc.2 – Guus

但是，这基本上意味着你不再有后退按钮，例如，返回页面时，你可以通过标签点击某些东西来显示某个详细信息页面。 Imo能够隐藏某些页面上的选项卡将是有益的，因为后台功能很有用。 – Johncl

@Johncl我明白你在说什么，但是在大多数情况下，我都会更适合这种情况。肯定会有例外。 – Jack

答

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

    }

答

有点添加以下代码党，但是，这个工作对我来说：

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

这个隐藏它仅适用于特定页面，没有空白或保证金问题。

如何在Ionic 2中隐藏导航栏？

相关推荐