ionic踩坑

1. tab+NavController

使用tab組件,執(zhí)行頁面跳轉(zhuǎn)后,新頁面仍然會包含tab,很多時候我們希望退出tab到新的頁面。這里我們不能直接使用

this.navCtrl.push(SomePage);

而要用

this.app.getRootNav().push(SomePage);

2. 刪除歷史記錄

比如我們完成登錄以后進入首頁,用戶操作后退按鈕時,我們不希望還能回溯到登錄頁,這時候需要刪除登錄頁的歷史記錄。這時,我們只需要添加以下代碼:

        //前往首頁
        this.navCtrl.push(HomePage, {
        })
        .then(() => {
          const startIndex = this.navCtrl.getActive().index - 1;
          console.log(startIndex)
          this.navCtrl.remove(startIndex, 1);
        });

3. 跨頁面數(shù)據(jù)通信

主要使用事件機制。比如假設(shè)接口返回登錄態(tài)失效,我們需要跳轉(zhuǎn)到登錄頁。但由于已經(jīng)把http相關(guān)功能抽象到專門的網(wǎng)絡(luò)接口處理模塊了,而作為一個Injectable模塊不能直接處理NavController的跳轉(zhuǎn),否則會報錯,這主要是為了保證數(shù)據(jù)層和具體處理邏輯的分離。這時候我們使用事件的方式來進行通知:

 import { Events } from 'ionic-angular';
 @Injectable()
 export class HttpService { 
      ...
      private event: Event,
      ...
 }
 this.events.publish('token:expired', Date.now());

然后在具體的業(yè)務(wù)頁面接收事件并作出相應(yīng)處理:

    constructor(public navCtrl: NavController,
        public events: Events,
        public app: App,
        public navParams: NavParams)  {
        events.subscribe('token:expired', (timestamp)=>{
            this.navCtrl.push(LoginPage);
        })
    }

值得注意的是,這里不需要在每個頁面添加這個邏輯,否則會跳轉(zhuǎn)多次,也就是說事件會向所有頁面廣播。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,027評論 25 709
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,282評論 4 61
  • 01 花的芬芳,雨的朦朧,葉的青翠,云的舒卷,在思念的季節(jié)里,留下一脈清澈。微風(fēng)拂過,可曾看見我們眼中的神...
    一席之言閱讀 265評論 0 1
  • 不敢對你表白 己經(jīng)錯過了春天 只是 你 己深鐫我心
    金劍書生閱讀 96評論 0 0
  • 像我這樣的單身VIP早已習(xí)慣了夜晚的孤獨,像我這樣一無所有又時刻夢想著成功渴望著暴富的人,根本不會給自己無聊...
    不說再見的機器貓閱讀 500評論 2 1

友情鏈接更多精彩內(nèi)容