ionic V3.10 开发踩坑集锦(三)

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仍然存在，须要隐藏。具体作法以下：

1. 安装Keyboard插件

ionic cordova plugin add ionic-plugin-keyboard
npm install --save @ionic-native/keyboard
复制代码

2. app.module.ts 中

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

3. 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');
  }
}
复制代码

4. 使用界面设置

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初学者的小项目