首页 文章

隐藏Ionic 2子页面中的标签[重复]

提问于
浏览 次
4

这个问题在这里已有答案：

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

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

当我运行离子发球;这是工作 . 但是当我尝试在我的设备上运行它时，我的标签不会隐藏在子页面中，我也无法使用它 .

有人有想法最终隐藏我的设备中的标签？

[更新]在我的子页面中，我有一个谷歌 Map . 如果我删除它，我就不再有问题了 .

子页面.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!');
    });
  }
}

我真的需要一张 Map . 有人已经有这个问题吗？

angular typescript ionic-framework ionic2 ionic3

3 回答

  • 5

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

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

    来自 Ionic docs ：

    tabsHideOnSubPages：boolean是否隐藏子页面上的选项卡 . 如果为true，则不会显示子页面上的选项卡 .

    回复于
  • 22

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

    回复于
  • 1

    要完全灵活地隐藏和显示选项卡，您还可以使用如下所示的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变量 . 在导航到子页面的函数内部，也在离子的ionViewWillEnter（）函数中 .

    回复于

相关问题