Question

我在纵向模式下有一个视图，在横向模式下有另一个视图，我想要显示图表，我隐藏了标签和标题（全屏模式，没有滚动）。我在横向模式下的视图看起来像这样：

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

我使用flex填充页面并创建“无滚动的全屏效果”。

由于

Answer 1

看来有这样的： http://ionicframework.com/docs/api/platform/Platform/

它有：

isPortrait()
isLandscape()

所以你可以这样做： platform.isPortrait()或platform.isLandscape() 如果你将平台注入构造函数。

将此与*NgIf结合使用：
https://angular.io/guide/template-syntax#ngif

CSS溢出，overflow-x，overflow-y是您要阻止滚动的内容，前提是它是块级容器：
https://developer.mozilla.org/en/docs/Web/CSS/overflow

<强>更新

基于此评论：

这是我最初的想法。这个问题是它离开了填充在顶部。我通过配置样式解决了它，但似乎对我很肮脏的解决方案

您可以通过获取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

您可以使用平台检查横向或纵向，然后您可以从模板中获取导航参考：

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

并使用ref：

在组件中调用setHidden(true)

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

对于标签，我认为你可以用同样的方式

如何在Ionic 3中以横向模式以编程方式隐藏标题和标签？

2 个答案: