GitHub地址：https://github.com/JerryMissTom ，欢迎关注

这是ionic 开发踩坑的第三篇文章，前两篇参见：ionic V3.10 开发踩坑集锦（一），ionic V3.10 开发踩坑集锦（二）开发环境与上文保持一致。

从Tab界面跳转到Login界面并隐藏Tab

我们的APP主页使用最常见的底部 Tab，设置界面中退出登录会跳转到 Login 界面。一开始使用的是 NavController.setRoot(); ，然后Login 界面中 Tab 会展示出来，使用其他手段隐藏 Tab ，但是不优雅。后来查询到一个很好的方法，如下：

import { App } from 'ionic-angular/components/app/app';

 constructor(
    private app: App
  ) 

toLoginPage(){
     this.app.getRootNavs()[0].setRoot(LoginPage);
     // 需要注意的是网上最常见的是下面的写法，但是getRootNav方法被废弃掉
     // this.app.getRootNav().setRoot(LoginPage);
}

在Tab界面中输入法唤起时隐藏Tab

Tab的一个界面中有input输入框，当输入文字唤起输入法的时候，tab仍然存在，需要隐藏。具体做法如下：

安装Keyboard插件

ionic cordova plugin add ionic-plugin-keyboard
npm install --save @ionic-native/keyboard

app.module.ts 中

import { Keyboard } from '@ionic-native/keyboard';
...
providers:[Keyboard]

tab设置

tab.html
<ion-tabs #myTabs>
  ...
</ion-tabs>

tab.ts
import { Component, ElementRef, Renderer, ViewChild } from '@angular/core';
import { Keyboard } from '@ionic-native/keyboard';
import { Events, Tabs } from 'ionic-angular';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  @ViewChild('myTabs') tabRef: Tabs;
  mb: any;
  
  constructor(private elementRef: ElementRef,
    private renderer: Renderer,
    private keyboard: Keyboard,
    private event: Events) {
  }

  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');
      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');
      this.renderer.setElementStyle(content, 'margin-bottom', this.mb)
    });
  }

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

    // 一定记得要取消订阅，网上很多没写这个，会带来隐藏的Bug
  ionViewWillUnload() {
    this.event.unsubscribe('hideTabs');
    this.event.unsubscribe('showTabs');
  }
}

使用界面设置

about.ts
import { Subscription } from 'rxjs/Subscription';
import { Keyboard } from '@ionic-native/keyboard';
...
export class About {
  private hideSubscription: Subscription;
  private showSubscription: Subscription;
  
  construct(
  private keyboard: Keyboard,
  private event: Events
  ){
      this.hideSubscription = null;
      this.showSubscription = null;
  }
  
   ionViewDidEnter() {
    this.hideSubscription = this.keyboard.onKeyboardShow().subscribe(() => this.event.publish('hideTabs'));
    this.showSubscription = this.keyboard.onKeyboardHide().subscribe(() => this.event.publish('showTabs'));
  }
  
  ionViewWillLeave() {
    this.keyboard.close();
    if (this.hideSubscription) {
      this.hideSubscription.unsubscribe();
      this.hideSubscription = null;
    }
    if (this.showSubscription) {
      this.showSubscription.unsubscribe();
      this.showSubscription = null;
    }
  }

`ionic` 界面的生命周期

ionViewDidLoad 只在界面创建的时候执行一次，假如此界面被缓存，重新进入后，不会被触发，可用于一些数据的初始化或赋值。

ionViewDidEnter 只要在界面变为 active 时候就触发一次，不管此界面是第一创建还是从缓存中获取。可用于每次进入界面中的网络刷新。

ionViewWillLeave 在界面将要消失，不再 active 的时候触发。

ionViewWillUnload 在界面将被 destroy 掉，不再存在时候触发，这个时候可以执行取消订阅事件。

ionViewCanEnter 在界面进入之前判断是否满足条件或权限

ionViewCanLeave 在界面离开之前判断是否满足条件或权限

推荐

最后推荐下我写的ionic的小项目，具体可以参见适合ionic初学者的小项目