如何在Ionic 2中隱藏導航欄和標簽頁？

Question

我試圖在子頁面中隱藏導航欄和選項卡（位於底部），發現了一種使用Access 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對其進行更改

Answer 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以顯示或隱藏導航欄。

Answer 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();
         }
     }
}

演示柱塞

Answer 3

我的問題是放置的標簽欄太多，似乎Ionic不支持。 所以我決定用一個細分來更改其中一個