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

到這裏咱們就完成了，當咱們點擊 消息 的那個圖標的時候，就能夠看到變化了。
圖示，能夠看到數據變化，而且控制檯也有輸出：