ionic3学习之Events

简介

官网的说明：
Events is a publish-subscribe style event system for sending and responding to application-level events across your app.

Events是一个发布 - 订阅式事件系统，用于在应用程序中发送和响应应用程序级别的事件。可以理解为：发布一个事件之后，可以将这个事件广播到整个工程的任何一个地方，只需要订阅就可以获取到传过来的值。

官方链接：ionic Event 官方链接地址

用法简介

发布事件

在第一个页面中发布一个事件。
需要导入 Events 依赖包

import { Events } from 'ionic-angular';

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

订阅事件

第二个页面中订阅事件，并且获取到 第一个节目上面的数据值

// second page (listen for the user created event after function is called)
constructor(public events: Events) {
  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);
  });
}

实例说明

需求

图示需求说明：

需求：我们希望能在 tabs 页面上的图标显示出消息数量，然后进入到 消息页面的时候，能动态的改变数量值，类似于微信聊天的消息提示的功能。

程序修改

明确需求了之后，我们就开始修改程序：

tabs.html （增加消息图标上面的 数字显示）

<ion-tab [root]="tab2Root" tabTitle="消息" tabIcon="chatbubbles" tabBadge="{{messageTabBadge}}" tabBadgeStyle="danger"></ion-tab>

tabBadge 属性可以给我增加一个显示区域
tabBadgeStyle 属性来调整显示区域的样式（背景颜色）
messageTabBadge 使用插值表达式来显示值

tabs.ts

// 通过变量来展示消息的数量
messageTabBadge: number = 0;

// 订阅改变事件
constructor(public events: Events) {
    // 订阅 改变值的事件
    this.events.subscribe('messageTabBadge:change', (number)=>{
      console.log("------------->");
      this.messageTabBadge = number;
    })
  }

MessagePage.ts
在这个界面中我们使用定时器来模拟数据变化

import {Events, IonicPage, NavController, NavParams} from 'ionic-angular';

messageTabBadge: number = 0;

constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public events: Events) {

    // 使用定时器来改变值
    setTimeout(()=>{
      this.changeMessageTabBadge();
    }, 3000);
  }
 
 // 发布事件
 changeMessageTabBadge(){
    this.messageTabBadge = 20;
    this.events.publish('messageTabBadge:change',this.messageTabBadge, Date.now());
  } 

到这里我们就完成了，当我们点击 消息 的那个图标的时候，就可以看到变化了。
图示，可以看到数据变化，并且控制台也有输出：