ionic V3.10 開發踩坑集錦(三)

JerryMissTom發表於2018-01-05

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
複製程式碼
  1. app.module.ts 中
import { Keyboard } from '@ionic-native/keyboard';
...
providers:[Keyboard]
複製程式碼
  1. 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');
  }
}
複製程式碼
  1. 使用介面設定
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初學者的小專案

相關文章