如何用RxJS实现页面间事件发布与接收？返回页面触发事件需求

核心思路 #

利用RxJS的Subject（或BehaviorSubject）构建全局事件总线，实现页面间的事件通信。当page1返回前发布事件，page2通过订阅事件总线接收数据并处理。

1. 创建全局事件服务 #

实现一个基于RxJS的事件服务，统一管理事件的发布与订阅：

// event.service.ts
import { Injectable } from '@angular/core'; // 若使用其他框架，可调整注入逻辑
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class EventService {
  private eventBus = new Subject<{ key: string; data: any }>();

  // 发布指定key的事件
  publish(key: string, data: any): void {
    this.eventBus.next({ key, data });
  }

  // 订阅指定key的事件
  subscribe(key: string, handler: (data: any) => void): void {
    this.eventBus.asObservable().subscribe(event => {
      if (event.key === key) {
        handler(event.data);
      }
    });
  }
}

2. Page1 发布事件并返回 #

在page1的返回方法中，先通过事件服务发布事件，再执行页面返回：

// page1.ts
import { EventService } from './event.service';

export class Page1Component {
  constructor(private eventService: EventService) {}

  closeFrom(): void {
    // 发布事件并携带数据
    this.eventService.publish('someEvent', { name: 'a name' });
    // 执行页面返回
    history.back();
  }
}

3. Page2 订阅事件并处理 #

在page2的初始化阶段订阅事件，处理接收到的数据，注意组件销毁时取消订阅避免内存泄漏：

// page2.ts
import { EventService } from './event.service';
import { Subscription } from 'rxjs';

export class Page2Component {
  private eventSub?: Subscription;

  constructor(private eventService: EventService) {}

  ngOnInit(): void {
    // 订阅目标事件
    this.eventSub = this.eventService.subscribe('someEvent', data => {
      const name = data.name;
      // 这里编写你的业务逻辑，比如更新视图、调用接口等
      console.log('收到来自page1的数据:', name);
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅
    this.eventSub?.unsubscribe();
  }
}

补充说明 #

• 如果page2是路由返回后重新初始化的组件，Subject会因为没有保存历史事件导致订阅后无法接收数据，此时建议改用BehaviorSubject（会保存最后一次发射的值）：

  // 修改event.service.ts中的eventBus定义
  private eventBus = new BehaviorSubject<{ key: string; data: any } | null>(null);
  
  // 订阅时过滤初始的null值
  subscribe(key: string, handler: (data: any) => void): void {
    this.eventBus.asObservable()
      .filter(event => event !== null && event.key === key)
      .subscribe(event => handler(event.data));
  }
  

• 若为多页应用（非SPA），内存中的事件总线会在页面跳转后清空，可结合sessionStorage临时存储事件数据，page2初始化时读取并清除。

内容的提问来源于stack exchange，提问作者Quý Đôn