Ionic 3で横向きモードでヘッダーとタブをプログラムで非表示にする方法

Question

私はポートレートモードで1つのビューを持ち、横にはチャートを表示し、タブとヘッダー（フルスクリーンモード、スクロールなし）を非表示にする横長モードのビューがあります。私は、ページに必要事項を記入し、「ノースクロールしてフルスクリーン効果」を作成するには、Flexを使用

<div showWhen="landscape" class="chart-settings split-container"> 
<ion-toolbar showWhen="landscape"> 
    <ion-grid> 
    <ion-row> 
     <ion-col col-6> 
     <ion-item> 
      <ion-label>Period</ion-label> 
      <ion-select [(ngModel)]="period"> 
      //options 
      </ion-select> 
     </ion-item> 
     </ion-col> 
     <ion-col col-6> 
     <ion-item> 
      <ion-label>Won/Lost</ion-label> 
      <ion-select [(ngModel)]="gender"> 
      //options 
      </ion-select> 
     </ion-item> 
     </ion-col> 
    </ion-row> 
    </ion-grid> 
</ion-toolbar> 
<div class="flexChart"> 
    <div id="chartdiv" [style.width.%]="100" [style.height.%]="100"></div> 
</div> 

：風景モードでの私の見解は次のようになります。

おかげ

Answer 1

まあ、ありそうです： http://ionicframework.com/docs/api/platform/Platform/

それはあります

isPortrait() 
isLandscape() 

ので、あなたが行うことができます。 platform.isPortrait()かplatform.isLandscape() を使用すると、コンストラクタにプラットフォームを注入した場合。

*NgIfと組み合わせる：
https://developer.mozilla.org/en/docs/Web/CSS/overflow

UPDATE

：
https://angular.io/guide/template-syntax#ngif

CSSのオーバーフロー、overflow-x、overflow-y予防スクロールが、それはブロックレベルのコンテナの提供のためにあなたが見たいものです

このコメントに基づいて：

これは私の最初の考えでした。これの問題は、は、の上に パディングを残すことです。私はスタイルを設定することによってそれを解決したが、それは私には かなり汚いソリューションに見えたあなたはContentのインスタンスを取得することにより、そのパディングの問題を修正して、このようなresize()メソッドを呼び出すことができます

：

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

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

    public yourMethod(): void { 
    this.content.resize(); 
    } 
} 

をhttps://ionicframework.com/docs/api/components/content/Content/#resize

コンテンツのサイズを再計算するように指示します。ヘッダー、フッター、またはタブを動的に追加/削除した後、これを と呼びます。

Answer 2

あなたは、あなたがテンプレートからNAVの参照を取得することができ、プラットフォームで風景やポートレートを確認することができます。

<ion-header> 
    <ion-navbar #navBar> 
    ... 
    </ion-navbar> 
</ion-header> 

とその参照を持つコンポーネントでsetHidden(true)を呼び出すための：

@ViewChild('navBar') navBar: Navbar 
// call in proper place 
this.navBar.setHidden(true) 

をタブ、私はあなたと同じ方法で行うことができると思う