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中的註冊的方法。