Ionic2中实现$broadcast与$on遇OneSignal跨页面通知接收问题

我帮很多开发者解决过类似的Ionic2 + OneSignal事件传递问题，核心是要搞清楚Angular2+和Ionic1在事件机制上的差异，以及OneSignal回调的上下文问题，咱们一步步来解决：

1. 先替换掉你当前的"事件广播"实现，用RxJS Subject做全局事件服务 #

Ionic1的$broadcast/$on依赖全局$rootScope，但Angular2+里更可靠的全局事件传递方式是用RxJS的Subject（或BehaviorSubject），它比Angular自带的EventEmitter更适合跨页面/组件的全局通信。

创建一个全局共享服务：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class GlobalEventService {
  // 创建一个Subject来承载通知打开事件
  private notificationOpenedSource = new Subject<any>();
  // 对外暴露可订阅的Observable
  notificationOpened$: Observable<any> = this.notificationOpenedSource.asObservable();

  // 广播通知打开事件
  broadcastNotificationOpened(data: any) {
    this.notificationOpenedSource.next(data);
  }
}

2. 把OneSignal的回调移到全局服务里，并用NgZone包裹确保Angular上下文 #

之前你可能在某个页面里初始化OneSignal回调，当页面销毁后，回调的上下文会失效。正确的做法是在全局服务里初始化OneSignal，同时用NgZone把回调逻辑包裹起来，确保它运行在Angular的变更检测范围内：

import { Injectable, NgZone } from '@angular/core';
import { GlobalEventService } from './global-event.service';
declare var OneSignal: any;

@Injectable()
export class OneSignalService {
  constructor(
    private ngZone: NgZone,
    private globalEventService: GlobalEventService
  ) {
    this.initOneSignal();
  }

  private initOneSignal() {
    // 初始化OneSignal（替换成你的配置）
    OneSignal.init('你的APP_ID', {
      googleProjectNumber: '你的谷歌项目号'
    });

    // 监听通知打开事件
    OneSignal.addEventListener('notificationOpened', (data) => {
      // 用NgZone包裹，确保回调逻辑在Angular上下文里执行
      this.ngZone.run(() => {
        // 通过全局事件服务广播事件
        this.globalEventService.broadcastNotificationOpened(data);
      });
    });
  }
}

3. 在页面里订阅事件，记得销毁时取消订阅 #

每个需要处理通知打开逻辑的页面，都可以订阅全局事件服务的notificationOpened$，同时在页面销毁时取消订阅，避免内存泄漏：

import { Component, OnDestroy } from '@angular/core';
import { GlobalEventService } from '../services/global-event.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'page-your-page',
  templateUrl: 'your-page.html'
})
export class YourPage implements OnDestroy {
  private notificationSub: Subscription;

  constructor(private globalEventService: GlobalEventService) {
    // 订阅通知打开事件
    this.notificationSub = this.globalEventService.notificationOpened$.subscribe(data => {
      // 这里写你的业务逻辑，比如跳转页面、更新数据等
      console.log('收到通知打开事件:', data);
      // 示例：如果通知携带页面参数，就跳转对应页面
      // this.navCtrl.push(data.payload.targetPage);
    });
  }

  ngOnDestroy() {
    // 页面销毁时取消订阅
    if (this.notificationSub) {
      this.notificationSub.unsubscribe();
    }
  }
}

为什么之前的方法失效？ #

• 你可能在单个页面里初始化OneSignal回调，页面切换后原页面实例被销毁，回调的上下文指向已销毁的实例，自然无法执行逻辑；
• 没有用NgZone包裹OneSignal回调，导致回调运行在Angular变更检测之外，页面上的更新不会生效；
• 误用了EventEmitter做全局广播，它本来是为组件父子通信设计的，跨页面场景下稳定性远不如RxJS Subject。

对比Ionic1的逻辑：Ionic1的$rootScope是全局单例，$broadcast会把事件发送到所有子作用域，而Ionic2的页面是独立组件，生命周期由Angular管理，必须通过全局服务+RxJS订阅的方式实现跨页面事件传递。

内容的提问来源于stack exchange，提问作者Skizo-ozᴉʞS ツ