Ionic3事件无法发布，登录时传递数据至侧边栏无响应

你遇到的登录事件无响应问题，核心原因非常明确——事件的发布名称和订阅名称不匹配！

问题代码分析 #

• 登录页面发布的事件名称是 'user:created'：

signin(){ 
    //登录逻辑代码
    this.events.publish('user:created', {data:res.UserName}); 
    this.navCtrl.setRoot(FrontPage, {x:res.Cardnumber}); 
}

• 但app.component.ts里订阅的却是 'user:loggedIn'：

this.events.subscribe('user:loggedIn',(data)=>{ 
    console.log('login event recieved'+ data); 
})

事件系统的核心逻辑是：只有当发布的事件名和订阅的事件名完全一致（包括大小写、字符）时，订阅者才能监听到事件并执行回调。两者名称不匹配，自然就不会有任何反应。

修正方案（二选一即可） #

方案1：修改发布的事件名，和订阅保持一致

把登录页面里的事件发布名称改成'user:loggedIn'：

signin(){ 
    //登录逻辑代码
    this.events.publish('user:loggedIn', {data:res.UserName}); 
    this.navCtrl.setRoot(FrontPage, {x:res.Cardnumber}); 
}

方案2：修改订阅的事件名，和发布保持一致

把app.component.ts里的订阅名称改成'user:created'：

this.events.subscribe('user:created',(data)=>{ 
    console.log('login event recieved'+ data); 
})

额外优化建议 #

为了避免以后再出现这类手动输入名称的错误，可以把事件名定义成常量统一管理：

// 比如创建一个constants.ts文件
export const EVENT_USER_LOGGED_IN = 'user:loggedIn';

// 登录页面引入并使用
import { EVENT_USER_LOGGED_IN } from './constants';
signin(){ 
    this.events.publish(EVENT_USER_LOGGED_IN, {data:res.UserName}); 
    this.navCtrl.setRoot(FrontPage, {x:res.Cardnumber}); 
}

// app.component.ts引入并使用
import { EVENT_USER_LOGGED_IN } from './constants';
this.events.subscribe(EVENT_USER_LOGGED_IN,(data)=>{ 
    console.log('login event recieved'+ data); 
})

这样就能彻底杜绝因名称拼写不一致导致的事件监听失效问题啦！

内容的提问来源于stack exchange，提问作者Umaiz Khan