简介
官网的说明:
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());
}
到这里我们就完成了,当我们点击 消息 的那个图标的时候,就可以看到变化了。
图示,可以看到数据变化,并且控制台也有输出: