不同浏览器标签页间Emit events通信失效，调用next()无响应问题咨询

问题根因 #

浏览器不同标签页的JS运行环境完全隔离，你所用的前端框架（从代码中的ngOnInit可以判断为Angular）的共享服务是单标签页内的单实例，不同标签页的ExampleService是完全独立的两个对象，因此标签页2调用next()只会触发当前标签页内的订阅，标签页1完全无法接收到事件。

解决方案 #

推荐使用专门用于同域下跨上下文通信的Broadcast Channel API实现，改动量最小，原有业务代码几乎不用调整：

1. 修改共享服务代码 #

import { Injectable, OnDestroy } from '@angular/core';
import { ReplaySubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ExampleService implements OnDestroy {
  // 统一通道名，不要和其他业务通道重名
  private closedChannel = new BroadcastChannel('tab-closed-channel');
  private tabClosedSource = new ReplaySubject<boolean>();
  tabClosedEvent = this.tabClosedSource.asObservable();

  constructor() {
    // 监听其他标签页发来的消息
    this.closedChannel.onmessage = (event) => {
      if (event.data === 'tab2_closed') {
        this.tabClosedSource.next(true);
      }
    };
  }

  toggleTabClosed() {
    // 发送消息给所有同域下的其他标签页
    this.closedChannel.postMessage('tab2_closed');
    this.tabClosedSource.next(true);
  }

  // 销毁通道避免内存泄漏
  ngOnDestroy(): void {
    this.closedChannel.close();
  }
}

2. 业务代码无需调整 #

标签页1的订阅逻辑、标签页2的触发逻辑都和原有代码一致，不用修改即可生效。

兼容老浏览器备选方案 #

如果需要兼容不支持Broadcast Channel API的老旧浏览器，可以用localStorage的storage事件实现，原理是同域下localStorage全局共享，修改时其他标签页会触发storage事件：

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

@Injectable({ providedIn: 'root' })
export class ExampleService {
  private tabClosedSource = new ReplaySubject<boolean>();
  tabClosedEvent = this.tabClosedSource.asObservable();

  constructor() {
    window.addEventListener('storage', (event) => {
      if (event.key === 'tab2_closed' && event.newValue === 'true') {
        this.tabClosedSource.next(true);
        // 用完清理标记，避免下次打开重复触发
        localStorage.removeItem('tab2_closed');
      }
    });
  }

  toggleTabClosed() {
    localStorage.setItem('tab2_closed', 'true');
    this.tabClosedSource.next(true);
  }
}

注意事项 #

• 两种方案都要求两个标签页满足同协议、同域名、同端口的同源策略，跨域场景无法生效
• 两种方案都不会影响原有单页面内的事件通信逻辑，原有单页内的调用逻辑完全兼容

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