Ionic2 rc2 Events 跨界面調用的使用方法及問題解決

Events：事件注冊  在任意一界面注冊事件之后可在任意界面根據事件名稱進行調用。

 

首先看一下官方文檔的調用方式

import { Events } from 'ionic-angular';

constructor(public events: Events) {}

// first page (publish an event when a user is created)
function createUser(user) {
  console.log('User created!')
  events.publish('user:created', user, Date.now());
}

// second page (listen for the user created event)
events.subscribe('user:created', (user, time) => {
  // user and time are the same arguments passed in `events.publish(user, time)`
  console.log('Welcome', user, 'at', time);
});

Events 有三個方法 分別是：

this.events.publish ()        //注冊Events事件
this.events.subscribe()        //調用Eevents事件
this.events.unsubscribe()        //注銷Events事件

使用實例：

Ionic2 升級Rc版之后,在Tabs的Menu頁調用Push事件跳轉到首頁的時候下面的菜單還是存在的，這樣明顯是不正常的。

解決辦法1：登錄頁自動隱藏Tabs菜單。

解決辦法2：在Tabs中注冊一個返回登錄頁得Events事件，通過Events返回首頁。

登錄頁的自動隱藏下次在記錄。我們現在采用最簡單的方式 第二個辦法。

Tabs界面代碼：

constructor(private nav: NavController, private events: Events) {
// this tells the tabs component which Pages
// should be each tab's root Page

}

 
ionViewDidLoad() {
    this.listenEvents();
    //console.log('界面創建'); 
  }
  ionViewWillUnload() {
    //console.log('界面銷毀');this.events.unsubscribe('toLogin');
  }

  listenEvents() {this.events.subscribe('toLogin', () => {
      this.nav.pop();
      console.log('返回登錄');
    });
  }

退出界面調用調用代碼

  logOut() {
    this.event.publish('toLogin');
  }

 

注:界面每次調用Push是會就是觸發ionViewDidLoad事件,調用Pop的時候則會銷毀界面,調用ionViewWillUnload。

所以注冊Events事件的時候必須在界面銷毀的時候把事件進行注銷,不然下次調用則會重復執行Events中的注冊的方法。