Ionic 3 Events组件用作会话存储时第三页无法获取值问题

你遇到的这个问题其实是Ionic 3 Events 模块的设计特性导致的，并非bug——Events 本质是「即时事件通知工具」，不是用来存储持久化状态的。它不会保留已发布的事件历史，只有在事件发布前就完成订阅的组件才能收到通知。

具体到你的场景：

• 登录页是在push PanelPage完成后才发布事件，而PanelPage的构造函数已经提前执行、订阅已经注册，所以能正常收到事件；
• 第三页是后续从第二页跳转过去的，这时候事件早就发布完毕了，你再订阅自然收不到任何回调——因为Events没有保存之前发过的事件记录。

下面给你两种更合适的解决方案，替代用Events做会话存储的思路：

方案一：使用Ionic官方的Storage模块（推荐） #

Storage是Ionic专门用于持久化数据的模块，底层会根据平台自动选择最优存储方案（Web端用localStorage/IndexedDB，移动端用SQLite），非常适合存储用户会话信息。

步骤1：安装并配置Storage #

如果还没安装，先执行命令：

ionic cordova plugin add cordova-sqlite-storage
npm install --save @ionic/storage

然后在app.module.ts中导入并注册：

import { IonicStorageModule } from '@ionic/storage';

@NgModule({
  imports: [
    // ...其他导入
    IonicStorageModule.forRoot()
  ]
})
export class AppModule {}

步骤2：登录页存储用户数据 #

import { Storage } from '@ionic/storage';

constructor(public storage: Storage, public navCtrl: NavController) {}

// 登录成功后的逻辑
this.navCtrl.push('PanelPage').then(() => {
  // 存储用户信息
  this.storage.set('usuario', usuario['Nombre']);
  this.storage.set('usuario_id', usuario['Id']);
  this.storage.set('usuario_rol', usuario['Roles']);
});

步骤3：在任意页面获取数据 #

比如在第三页的ionViewWillEnter生命周期钩子中获取（确保每次进入页面都能拿到最新数据）：

import { Storage } from '@ionic/storage';

constructor(public storage: Storage, public cdr: ChangeDetectorRef) {}

ionViewWillEnter() {
  this.storage.get('usuario_rol').then(user_rol => {
    console.log('Rol en preventa:', user_rol);
    this.usuario_rol = user_rol;
    this.cdr.detectChanges(); // 触发变更检测，确保视图更新
  });

  // 同理获取其他字段
  this.storage.get('usuario').then(user => console.log('user name:', user));
}

方案二：自定义全局状态Service #

如果不需要持久化（比如只需要在APP运行期间保存用户信息），可以创建一个单例Service来存储全局状态——Ionic/Angular中的Service默认是单例的，所有页面注入的都是同一个实例，数据自然能共享。

步骤1：创建UserService #

// src/services/user.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class UserService {
  private userInfo: {
    nombre: string,
    id: any,
    roles: any
  } = { nombre: '', id: '', roles: [] };

  // 设置用户信息
  setUserInfo(nombre: string, id: any, roles: any) {
    this.userInfo.nombre = nombre;
    this.userInfo.id = id;
    this.userInfo.roles = roles;
  }

  // 获取完整用户信息
  getUserInfo() {
    return { ...this.userInfo }; // 返回副本，避免外部直接修改内部状态
  }

  // 单独获取角色
  getUserRol() {
    return this.userInfo.roles;
  }

  // 登出时清空数据
  clearUserInfo() {
    this.userInfo = { nombre: '', id: '', roles: [] };
  }
}

步骤2：注册Service #

在app.module.ts的providers数组中添加这个Service：

import { UserService } from './services/user.service';

@NgModule({
  providers: [
    // ...其他服务
    UserService
  ]
})
export class AppModule {}

步骤3：登录页设置数据 #

import { UserService } from '../services/user.service';

constructor(public userService: UserService, public navCtrl: NavController) {}

// 登录成功后
this.navCtrl.push('PanelPage').then(() => {
  this.userService.setUserInfo(
    usuario['Nombre'],
    usuario['Id'],
    usuario['Roles']
  );
});

步骤4：在第三页获取数据 #

import { UserService } from '../services/user.service';

constructor(public userService: UserService, public cdr: ChangeDetectorRef) {}

ionViewWillEnter() {
  this.usuario_rol = this.userService.getUserRol();
  console.log('Rol en preventa:', this.usuario_rol);
  // 如果需要其他字段，直接调用getUserInfo即可
  const userInfo = this.userService.getUserInfo();
  console.log('user name:', userInfo.nombre);
}

补充：如果非要用Events怎么办？ #

如果因为某些原因必须用Events，那你需要额外存储一份数据，在订阅时先检查本地存储的内容，再订阅后续事件。比如结合上面的Storage或Service：

// 第三页的订阅逻辑
constructor(public events: Events, public storage: Storage) {}

ionViewWillEnter() {
  // 先从Storage拿到已存的角色
  this.storage.get('usuario_rol').then(rol => {
    if (rol) {
      this.usuario_rol = rol;
    }
  });

  // 再订阅后续可能的事件更新
  this.events.subscribe('usuario_rol', (user_rol) => {
    this.usuario_rol = user_rol;
    // 同时更新Storage
    this.storage.set('usuario_rol', user_rol);
  });
}

但这种方式其实是多此一举，不如直接用前面两种方案更简洁合理。

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