如何在 Ionic 2 中隐藏导航栏和选项卡？答案

【问题标题】：How to hide nav-bar and tabs in Ionic 2?如何在 Ionic 2 中隐藏导航栏和选项卡？
【发布时间】：2017-12-27 21:45:23
【问题描述】：

我试图在子页面中隐藏导航栏和选项卡（位于底部）我找到了使用访问 css 样式并将 display 更改为 none 的解决方案。

我成功隐藏了导航栏和选项卡，但问题是子页面 tableView 中仍然存在空白，并且子页面内容在两个空白之间，如您在屏幕截图中看到的那样

我该如何解决这个问题？

这是我隐藏导航栏和标签的代码

    //get all tabs elements
    if (document.querySelector('.tabbar')) {
      this.tabBarElements = document.querySelectorAll('.tabbar.show-tabbar');
    }

    //get all toolbar elements
    if (document.querySelector('.toolbar')) {
      this.toolBarElements = document.querySelectorAll('.toolbar');
    }
  }

  //hide all tabs and the header toolbar when enter page
  ionViewWillEnter() {
    if (this.tabBarElements) {
      this.tabBarElements[0].style.display = 'none';
      this.tabBarElements[1].style.display = 'none';
    }

    if (this.toolBarElements) {
      this.toolBarElements[1].style.display = 'none';
    }

  }

信息

我找到了导致问题的原因（参见底部的屏幕截图），但我无法通过访问 CSS 对其进行更改

【问题讨论】：

How to hide nav-bar with tabs in Ionic 2?的可能重复
我在这个问题中使用了 LeRoy 的代码
我找到了导致问题的原因，但我无法使用 css 对其进行更改

标签： css angular ionic2

【解决方案1】：

对于 ionic 2，您可以像这样直接编辑与页面关联的 html：

<ion-header>
  <!--ion-navbar>      
    <ion-title>
      Login
    </ion-title>
  </ion-navbar-->
</ion-header>

或者如果您想以编程方式执行此操作，您可以执行以下操作：

<ion-header>
 <span *ngIf = "hideNavBar">
   <ion-navbar>      
     <ion-title>
       {{varTitle}}
     </ion-title>
   </ion-navbar>
  </span>
</ion-header>

其中 hideNavBar 是一个布尔变量，您可以将其放在与页面关联的 .ts 文件中的构造函数之前（以及类声明之后），并将其设置为 true 或 false 以显示或隐藏导航栏。

【讨论】：

感谢您的回答，但我的问题是隐藏父页面的导航栏而不是子页面的导航栏
我不确定父页面和子页面是什么意思。您能否截取渲染页面的屏幕截图并指出您要修改的内容？
例如，您有一个名为 A 的页面，当我使用 push(pageB) 导航到另一个名为 B 的页面时，我放置了一个导航栏和一个选项卡，页面 A 的选项卡仍然存在于页面 A 中.所以页面 A 是父页面，页面 B 我称为子页面
好的。我现在知道了。我提供的答案仅适用于导航栏，不适用于选项卡。我尝试了 Swapnil 的解决方案，该解决方案在我的系统上适用于选项卡。他的解决方案不起作用，您看到了什么？

【解决方案2】：

告诉内容重新计算其尺寸。 resize() 应该在动态添加/删除页眉、页脚或标签后调用。

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({...})
export class MyPage{
  @ViewChild(Content) content: Content;

  resize(){
    this.content.resize();
  }
   ionViewWillEnter() {
         if (this.tabBarElements) {
             this.tabBarElements[0].style.display = 'none';
             this.tabBarElements[1].style.display = 'none';
             this.resize();
         }

         if (this.toolBarElements) {
             this.toolBarElements[1].style.display = 'none';
             this.resize();
         }
     }
}

演示Plunker

【讨论】：

添加一个按钮并尝试在单击该按钮时调用 resize() 。我试过了，效果很好。
空白仍然保持不变
plnkr.co/edit/93mRrD?p=preview。我试着用标题做这个。隐藏标题然后调整大小。
不，但我的问题是放置了太多标签栏，它似乎不受 ionic 支持。所以我决定用一个片段来改变其中一个，现在可以了
调整大小适用于标题隐藏时，但不适用于标签也隐藏时。关于如何使内容也流入标签空间的任何线索？

【解决方案3】：

我的问题是放置了太多选项卡栏，Ionic 似乎不支持它。所以我决定用一个段来改变其中一个，现在可以了

【讨论】：