tabs页面跳转子页面，隐藏tabs；返回tabs页面，显示tabs问题

问题界面效果如下：

 

解决方法1

 适用情况：tabs页面有且仅有一个tabs。

 步骤：在app.module.ts,imports中的【IonicModule.forRoot(MyApp)】替换成如下代码

 IonicModule.forRoot(MyApp,{
      tabsHideOnSubPages: 'true',         //隐藏全部子页面tabs
      backButtonText: '',
      backButtonIcon: 'ios-arrow-back-outline',//统一返回按钮图标
      modalEnter: 'modal-slide-in',
      modalLeave: 'modal-slide-out',
      tabsPlacement: 'bottom'
    }),

 效果：

 

 缺点：如果有多个tabs的话，只会隐藏最内层的tabs

解决方法2

 适用情况：tabs页面有且仅有一个底部tabs

 步骤：在子页面添加如下代码

export class HomePage {
  ...
  constructor(...) {
    let elements = document.querySelectorAll(".tabbar");
    if (elements != null) {
      Object.keys(elements).map((key) => {
        elements[key].style.display = 'none';
      });
    }
  }


  ionViewDidLeave(){
	let elements = document.querySelectorAll(".tabbar");
	if (elements != null) {
	Object.keys(elements).map((key) => {
	  elements[key].style.display = 'flex';
	});
	}
  }
  ...
}

 效果：

 

 缺点：如果有多个tabs的话，跳转子页面隐藏所有tabs没有问题，返回tabs页面，顶端tabs会遮住页面内容。问题如下图 

 

解决方法3

 适用情况：tabs页面有多个tabs

 步骤：（说明：tabs页面有底部tabs，my-test页面有顶部tabs，about页面是两个tabs中间的内容，home页面是about页面点击item后跳转的页面）

 1.在tabs页面ts文件都要添加以下代码

 顶部的tabs(代码中“...”省略的代码）

import {HomePage} from "../home/home";
import {AboutPage} from "../about/about";
...
export class MyTestPage {
  @ViewChild('topTabs') tabRef: Tabs;
  mb: any;
  public orderTabs = [
    {url:AboutPage,title:"全部",params: {status:''} ,number:""},
    {url:AboutPage,title:"待确认",params: {status: '0' } ,number:""},
    {url:AboutPage,title:"待付款",params: {status:'1' } ,number:""},
    {url:AboutPage,title:"已付款",params: {status:'2' } ,number:""},
  ];
  

  constructor(...,private elementRef: ElementRef,
              private event: Events,private renderer: Renderer) {
  }

  ...

  ionViewDidLoad(){
    let tabs = this.queryElement(this.elementRef.nativeElement, '.tabbar');
    this.event.subscribe('hideTabs1', () => {
      this.renderer.setElementStyle(tabs, 'display', 'none');
      let SelectTab = this.tabRef.getSelected()._elementRef.nativeElement;
      let content = this.queryElement(SelectTab, '.scroll-content');
      if (content != null){
        this.mb = content.style['margin-top'];
        this.renderer.setElementStyle(content, 'margin-top', '0')
      }
    });
    this.event.subscribe('showTabs1', () => {
      this.renderer.setElementStyle(tabs, 'display', '');
      let SelectTab = this.tabRef.getSelected()._elementRef.nativeElement;
      let content = this.queryElement(SelectTab, '.scroll-content');
      if (content != null){
        this.renderer.setElementStyle(content, 'margin-top', this.mb)
      }
    })
  }
  queryElement(elem: HTMLElement, q: string): HTMLElement {
    return <HTMLElement>elem.querySelector(q);
  }
}

 底部的tabs(代码中“...”省略的代码）

import {Renderer, ViewChild, ElementRef} from '@angular/core';
import {Events, Tabs} from "ionic-angular";


export class TabsPage {

  ...

  @ViewChild('myTabs') tabRef: Tabs;
  mb: any;

  constructor(private elementRef: ElementRef,private event: Events,private renderer: Renderer) {

  }

  ionViewDidLoad(){
    let tabs = this.queryElement(this.elementRef.nativeElement, '.tabbar');
    this.event.subscribe('hideTabs', () => {
      this.renderer.setElementStyle(tabs, 'display', 'none');
      let SelectTab = this.tabRef.getSelected()._elementRef.nativeElement;
      let content = this.queryElement(SelectTab, '.scroll-content');
      if (content != null){
        this.mb = content.style['margin-bottom'];
        this.renderer.setElementStyle(content, 'margin-bottom', '0')
      }
    });
    this.event.subscribe('showTabs', () => {
      this.renderer.setElementStyle(tabs, 'display', '');
      let SelectTab = this.tabRef.getSelected()._elementRef.nativeElement;
      let content = this.queryElement(SelectTab, '.scroll-content');
      if (content != null){
        this.renderer.setElementStyle(content, 'margin-bottom', this.mb)
      }
    })
  }

  queryElement(elem: HTMLElement, q: string): HTMLElement {
    return <HTMLElement>elem.querySelector(q);
  }
}

 2.进入子页面，隐藏tabs；离开子页面，显示tabs。如下代码(代码中“...”省略的代码）

import { Events } from 'ionic-angular';
...

export class HomePage {
  ...
  constructor(private event: Events) {
    ...
    this.event.publish("hideTabs");
    this.event.publish("hideTabs1");
  }


  ionViewDidLeave(){
	this.event.publish("showTabs");
	this.event.publish("showTabs1");
  }

}

 效果：

  

缺点：代码复杂。