在 Ionic 2 的子页面中隐藏选项卡 [重复]答案

【问题标题】：Hide tabs in sub pages in Ionic 2 [duplicate]在 Ionic 2 的子页面中隐藏选项卡 [重复]
【发布时间】：2017-08-03 16:24:30
【问题描述】：

我尝试在我的应用程序的所有子页面上隐藏标签。我用这个：

<ion-tab [root]="MyPage" tabsHideOnSubPages="true" ...></ion-tab>

当我运行 ionic serve 时；是工作。但是当我尝试在我的设备上运行它时，我的标签没有隐藏在子页面中，我无法使用它。

有人想最终将我的标签隐藏在我的设备中吗？

[更新] 在我的子页面中，我有一个谷歌地图。如果我删除它，我就没有我的问题了。

子页面.html：

<ion-header>
  <c-header></c-header>
</ion-header>

<ion-content>
  <div id="map"></div>
</ion-content>

子页面.css：

#map {
  height: 50%;
}

子页面.ts：

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng } from 'ionic-native';

/*
  Generated class for the DetailsMedicalEvent page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-details-medical-event',
  templateUrl: 'details-medical-event.html'
})
export class DetailsMedicalEventPage {

  map: GoogleMap;

  constructor(public navCtrl: NavController, public platform: Platform) {
    platform.ready().then(() => {
      this.loadMap();
    });
  }

  loadMap(){

    let location = new GoogleMapsLatLng(-34.9290,138.6010);

    this.map = new GoogleMap('map', {
      'backgroundColor': 'white',
      'controls': {
        'compass': true,
        'myLocationButton': true,
        'indoorPicker': true,
        'zoom': true
      },
      'gestures': {
        'scroll': true,
        'tilt': true,
        'rotate': true,
        'zoom': true
      },
      'camera': {
        'latLng': location,
        'tilt': 30,
        'zoom': 15,
        'bearing': 50
      }
    });

    this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
      console.log('Map is ready!');
    });
  }
}

我真的需要一张地图。有人已经有这个问题了吗？

【问题讨论】：

你的离子版本是什么？在你的 package.json
你想看什么？我有 '"@ionic/app-scripts": "1.1.4"' ？
好的..我想知道您是否使用的是旧版本的ionic-angular。我正在使用相同的代码，它可以工作
我使用 "ionic-angular": "2.2.0"
您测试了哪种设备？

标签： angular typescript ionic-framework ionic2 ionic3

【解决方案1】：

您也可以尝试在app.module.ts 文件中设置tabsHideOnSubPages 配置属性，如下所示：

... 
imports: [
    IonicModule.forRoot(MyApp, {
        // Tabs config
        tabsHideOnSubPages: true,
        ...
    })
]
...

来自Ionic docs：

tabsHideOnSubPages:boolean

是否隐藏子页面上的标签。如果为真，则不会在子页面上显示标签。

【讨论】：

它不起作用，兄弟
@sebaferras，对不起，我不打算投反对票。不小心做到了。当我尝试撤销我的操作时，我不能。
对不起，我犯的错误。您能否对答案进行任何更改，以便我可以撤销否决票？也请你看看我的问题stackoverflow.com/questions/49492197/…？
@sebaferreras 感谢您的回复
工作正常。谢谢！

【解决方案2】：

在 app.module.ts 中添加“tabsHideOnSubPages: true”对我有用。（离子 2）

【讨论】：

【解决方案3】：

要完全灵活地选择何时隐藏和显示选项卡，您也可以只使用如下 CSS 类：

ion-tabs.hidden div.tabbar {
    display: none
}

在您的 tabs.ts 中，您可以有一个布尔变量来表示是否应该隐藏选项卡。

public hideTabs:boolean = false;

在 tabs.html 中将 ngClass 添加到 ion-tabs 以在变量为 true 时应用 hideTabs 样式：

<ion-tabs [ngClass]="{'hidden': hideTabs}">

您可以在任何函数 f.e. 中切换 hideTabs 变量。在导航到子页面的函数中，也在 ionic 的 ionViewWillEnter() 函数中。

【讨论】：

它不起作用。我已经更新了我的帖子。