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中的注册的方法。