关于TypeScript页面跳转，事件监听和数据传递

ionic3采用的是typescript写法，页面间跳转的几种方式。

页面堆栈方式（NavController）

先进后出，后进先出，push()和pop()，在需要跳转的页面引入 NavController，
NavParams(跳转带过去的参数)，在跳转到的页面添加 NavParams 接收传过来
的参数，一般页面跳转都带有返回的按钮，所以和pop()一样，也可以调用
this.navCtrl.pop()返回前一页面。

//跳转页面
import { NavController , NavParams } from 'ionic-angular';
export class HomePage {
  constructor(public navCtrl: NavController , 
              public navParams : NavParams ) {}

    //your codes...
    push(){
        this.navCtrl.push(xxx,{  //xxx代表跳转到的页面，以及传递的参数       
            "id" : 1,
            "name" : "Neo"                      
        })
    }
}

//跳转到的页面
import { NavParams } from 'ionic-angular';
export class xxx {
  id : number;
  name : string;
  constructor(public navParams : NavParams ) {

    //your codes...   类似键值对获取数据
    this.id = this.navParams.get('id');
    this.name = this.navParams.get('name');
  } 
}

模态化窗口的形式（ModalController）

即一个小弹窗形式，modal跳转也是页面跳转。
和NavController用法是一样的，也可以传递参数到跳转页面，
获取值的方式也是通过NavParams.get()；
不同在于设备大小而显示的模态话窗口大小不一样。需要引入ModalController。

import { ModalController } from 'ionic-angular';
export class HomePage {
  id : number;
  name : string;
  constructor(public modal: ModalController ) {

    //your codes...   
    let modal = this.modal.create(xxx,{ //xxx是要跳转到的页面
        "id" : 1,
        "name" : "Neo"
    }) ;
    modal.present();
  } 
}

---

事件发布订阅（Events）

有时候可能会反复切换和跳转页面，反复修改数据。
但是这时又想让数据同步刷新在页面上，
而且想所有页面都共享所需数据
想只是局部刷新数据，而不是全局刷新，这时就需要用到（Events）事件的发布和订阅了。

参考官方例子 Events
发布页面：

import { Events } from 'ionic-angular';    //导入
...
export class EventsPage {
  user : string = 'Events';

  constructor(public events: Events) {}

  publishEvents(user) {
    console.log('User created!')
    this.events.publish('user:created',this.user, Date.now());
    console.log(this.user)
  }
}

要接收数据的页面（订阅页面）：

import { Component} from '@angular/core';
import { Events } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  myEvent : string;
  constructor(public events: Events) {
    var that = this; //避免作用域混淆
    events.subscribe('user:created', (user, time) => {
      //HomePage.prototype.myEvent = user; 
      that.myEvent = user;
    });
  }
}

Events is a publish-subscribe style event system for sending and responding to application-level events across your app.

注意：

订阅必须在发布之前，不然接收不到。像回调函数，先自己定义方法，当成功执行某件事件后触发。
再通俗易懂点：比如微信公众号，你要先关注才能接收到它的推文，不然它再怎么发推文，你也收不到。也就是说，接收页面必须在发布页面前被加载过。