Ionic 2のnav-barとタブを隠すには？

Question

サブページのナビゲーションバーとタブ（下にある）を非表示にしようとしています。アクセスCSSスタイルを使用してdisplayをnoneに変更するソリューションを見つけました。

私は成功したナビゲーションバーとタブが、それはまだ空白がサブページのtableViewであり、あなたがスクリーンショットに

を見ることができるようにサブページのコンテンツは、2つの空白の間にあるという問題が隠されて

この問題を解決するにはどうすればよいですか？

これはナビゲーションバーとタブ

//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'; 
    } 

    } 

INFO

を非表示にするには、私のコードである私は、問題の原因を見出した（一番下のスクリーンショットを参照）が、私はできませんイオン2についてCSS

Answer 1

私の問題は、イオンによってサポートされていないようですあまりにタブ・バーを配置しました。そこで、私は今、大丈夫だと分かりました。

Answer 2

にアクセスすると、それに変更を加えるには、直接としてHTMLを編集することができますsociatedそのようなページを持つ：

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

またはあなたがプログラム的にそれをやってみたかった場合、あなたのような何かができる：

hideNavBarはあなたが（コンストラクタの前に置くブール変数である

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

およびクラス宣言の後）をページに関連付けられた.tsファイルに追加し、trueまたはfalseに設定してナビゲーションバーを表示または非表示にします。

Answer 3

寸法を再計算するようにコンテンツを指示します。ヘッダー、フッター、またはタブを動的に追加/削除した後に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