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初學者的小項目