见龙在田ionic-angular跨页面通信解决方案之----Events

一.前言

         在Web开发之中,跨页面通信是一个与生俱来的痛点.通常的解决方案如下:

         1.通过top.window对象的属性进行桥接处理,页面对象存在时都可以调用top.window对象进行数据的实时获取交换.

    这种方式优点是简单方便,缺点也很明显,大量暴露在外的数据无疑不是一个安全的设计.

         2.通过H5的sessionStorage或localStorage实现类似数据库效果的读取-存储机制.优点是可以跨框架,跨平台,缺点是难以维护,不够轻量级,并且会受到缓存清除的影响.

         3.在特定框架下的跨平台解决方案,例如ionic-angular类库下的Events模块.该方案优点是轻量级,整个类只有三个API,专为页面通信而生,用时引入,用完即弃,毫无痕迹.

二.原理  

     在项目中碰到过一个场景,应该是很常见的一个需求: 离开某个页面时,进入另一个页面,新页面需要重新加载数据,并且需要已关闭页面传递过来一个参数,用来设置新的属性.

         这让我首先想到了框架内的提供的ionic生命周期函数

在视图载入后执行的钩子

ionViewDidLoad

在视图即将销毁时执行的钩子

ionViewWillUnload

想法原理:

       希望A页面离开时,向B页面传递参数,并且通知B页面刷新数据.

       在A页面的ionViewWillUnload生命周期中,向B页面对象广播一个消息,通知B页面A即将关闭,并且向B页面传递当前A页面的一个参数.B页面在ionViewDidLoad生命周期时就注册监听随时来自A页面广播的消息,如果收到消息就刷新数据,并且接收来自A页面的参数,最后在B页面也关闭的时候,B的ionViewWillUnload周期注销掉监听器,就这样就很轻量级实现了页面通信.

三.实现

    具体代码如下:首先引入Events模块(此处省略其他模块)

import {Events} from 'ionic-angular';

        在B页面先做监听,其中涉及到了events的第一个api,subscribe.该api监听一个名为'tomyheart'的广播,并在收到广播后执行一个函数selectForState(),目的是刷新数据.

ionViewDidLoad() {
  console.log('界面创建');
  this.listenEvents();
}
listenEvents() {
  this.events.subscribe('tomyheart', () => {
    console.log('OKOKOK')
    this.selectForState()
  });
}

       随后B页面在关闭时注销该观察器,第二个api unsubscribe.顾名思义

ionViewWillUnload() {
  console.log('界面销毁');
  this.offListen()
}
offListen(){
  this.events.unsubscribe('tomyheart');
}

       然后来到了我们的A页面,A页面在即将关闭时发出这个广播,第三个api publish,该api发起一个名为'tomyheart'的广播,并且在第二个参数可以传递一个对象参数,以供B页面调用

ionViewWillUnload() {
	 console.log('fine')
    this.events.publish('tomyheart',{})}

        至此,完成闭环.该方案相当于在系统内部,所有页面之间建立了一个通信机制,任何页面可以在任何生命周期和另一个页面进行通信行为,包括参数传递,特定时机调用函数等等,善用的话功能非常强大.

         结尾:注意,该Events机制不可滥用,尤其注意在A页面销毁时注销掉监听器,否则可能会引起性能问题.另外,使用子组件开发的话,子组件内部是无法触发Ionic生命周期函数的(angular4生命周期函数可以被触发),必须在父组件的生命周期之中进行广播监听和销毁指令,再调用子组件函数的方式进行.