如何在Angular不同窗口的组件间共享同一服务实例？

你猜的完全没错！新窗口会启动一个全新的Angular应用实例，这意味着每个窗口都有自己的myService实例，新实例里的data自然还是初始的"old data"——毕竟两个窗口的JavaScript环境是完全隔离的，没法直接共享同一个服务实例。

不过别担心，我们可以利用浏览器提供的跨窗口通信机制来解决这个问题，下面给你几个实用的方案：

方案1：用window.postMessage直接传递数据 #

这是最通用的跨窗口通信方式，兼容性最好。思路是在主窗口更新数据后，把最新值主动发送给新打开的窗口，新窗口接收后再使用。

修改mainComponent.ts的open方法：

open() {
  this.myObs = this.myService
    .fetchObservable()
    .subscribe(() => {
      // 先获取最新的data值
      const latestData = this.myService.data.value;
      // 打开新窗口并保存引用
      const newWindow = this.nativeWindow.open('workflow-editor');
      // 监听新窗口的load事件，确保它加载完成后再发消息
      newWindow.addEventListener('load', () => {
        newWindow.postMessage(latestData, window.location.origin);
      });
    })
}

然后在otherComponent.ts中监听消息：

ngOnInit(){
  // 先订阅初始值（可选）
  this.myService.data.subscribe(value => {
    console.log('初始值:', value);
  });

  // 监听主窗口发来的消息
  window.addEventListener('message', (event) => {
    // 验证消息来源，避免恶意数据
    if (event.origin !== window.location.origin) return;
    // 更新当前服务的data值
    this.myService.data.next(event.data);
    console.log('收到新数据:', event.data);
  });
}

方案2：用localStorage/sessionStorage共享数据 #

把数据存在浏览器的存储里，两个窗口都可以访问。适合需要持久化或者多个窗口共享状态的场景。

修改myService.ts的fetchObservable方法：

fetchObservable(){
  return this.http.get('./url')
    .pipe(
      map(res => {
        const newData = "new data";
        this.data.next(newData);
        // 同时存到localStorage
        localStorage.setItem('sharedData', newData);
        console.log(this.data.value);
        return res;
      })
    )
}

然后在otherComponent.ts中读取并监听变化：

ngOnInit(){
  // 先读取localStorage里的最新值
  const savedData = localStorage.getItem('sharedData');
  if (savedData) {
    this.myService.data.next(savedData);
    console.log('从存储获取的数据:', savedData);
  }

  // 监听存储变化（如果主窗口后续再更新数据，也能同步）
  window.addEventListener('storage', (event) => {
    if (event.key === 'sharedData' && event.newValue) {
      this.myService.data.next(event.newValue);
      console.log('存储更新的数据:', event.newValue);
    }
  });
}

注意：storage事件只有在其他窗口修改存储时才会触发，当前窗口修改不会触发。

方案3：用Broadcast Channel API（现代浏览器推荐） #

这是浏览器专门为同源窗口间通信设计的API，比postMessage更简洁，不需要管理窗口引用。

修改myService.ts：

// 创建一个广播频道，名字自定义
private dataChannel = new BroadcastChannel('shared-data-channel');
public data: BehaviorSubject<string> = new BehaviorSubject<string>("old data");

fetchObservable(){
  return this.http.get('./url')
    .pipe(
      map(res => {
        const newData = "new data";
        this.data.next(newData);
        // 发送广播
        this.dataChannel.postMessage(newData);
        console.log(this.data.value);
        return res;
      })
    )
}

// 记得在服务销毁时关闭频道
ngOnDestroy() {
  this.dataChannel.close();
}

然后在otherComponent.ts中监听广播：

private dataChannel: BroadcastChannel;

ngOnInit(){
  this.myService.data.subscribe(value => {
    console.log('初始值:', value);
  });

  // 连接同一个广播频道
  this.dataChannel = new BroadcastChannel('shared-data-channel');
  this.dataChannel.addEventListener('message', (event) => {
    this.myService.data.next(event.data);
    console.log('收到广播数据:', event.data);
  });
}

// 组件销毁时关闭频道
ngOnDestroy() {
  this.dataChannel.close();
}

这个方案的优点是不需要关心哪个窗口发送的消息，只要是同源的窗口都能收到，代码也更干净，但要注意它的兼容性（IE完全不支持，现代浏览器都支持）。

总结一下：因为两个窗口是独立的应用实例，没法共享同一个服务实例，必须通过浏览器提供的跨窗口通信机制来同步数据。上面的三个方案可以根据你的需求和浏览器兼容性要求来选择~

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