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());
  }

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