咨询：Electron+Angular多窗口如何共享同一DI容器与模型状态？

每个Electron窗口对应独立的渲染进程，拥有各自的V8引擎上下文和Angular应用实例，无法直接共享同一Angular依赖注入容器或服务实例。要实现多窗口状态实时同步，需通过Electron的进程间通信（IPC）机制来统一管理共享状态，以下是可行的解决方案：

最优方案：将共享服务移至Electron主进程（单例管理） #

把需要共享状态的服务（如你的Rendering Manager）的核心逻辑和状态放到Electron主进程中维护唯一实例，各窗口的Angular应用通过IPC与主进程交互，实现状态同步。

实现步骤： #

1. 主进程维护单例服务
   在Electron主进程中创建Rendering Manager的全局唯一实例，处理状态变更并向所有渲染进程广播更新：

   const { ipcMain, BrowserWindow } = require('electron');
   
   class RenderingManager {
     isRunning = false;
   
     toggle() {
       this.isRunning = !this.isRunning;
       // 向所有打开的窗口广播状态变更
       BrowserWindow.getAllWindows().forEach(win => {
         win.webContents.send('rendering-state-changed', this.isRunning);
       });
     }
   }
   
   // 全局唯一实例
   const globalRenderingManager = new RenderingManager();
   
   // 监听渲染进程的状态切换请求
   ipcMain.on('toggle-rendering', () => {
     globalRenderingManager.toggle();
   });
   
   // 响应渲染进程的状态查询
   ipcMain.handle('get-rendering-state', () => {
     return globalRenderingManager.isRunning;
   });
   

2. Angular侧封装IPC通信服务
   在Angular中创建封装后的服务，内部通过ipcRenderer与主进程交互，对外暴露和原服务一致的API，让组件无缝使用：

   import { Injectable } from '@angular/core';
   import { ipcRenderer } from 'electron';
   import { BehaviorSubject, Observable } from 'rxjs';
   
   @Injectable({ providedIn: 'root' })
   export class RenderingManagerService {
     private isRunningSubject = new BehaviorSubject<boolean>(false);
     public isRunning$: Observable<boolean> = this.isRunningSubject.asObservable();
   
     constructor() {
       // 初始化时获取当前状态
       ipcRenderer.invoke('get-rendering-state').then(state => {
         this.isRunningSubject.next(state);
       });
       // 监听主进程的状态变更广播
       ipcRenderer.on('rendering-state-changed', (_event, state) => {
         this.isRunningSubject.next(state);
       });
     }
   
     toggle(): void {
       ipcRenderer.send('toggle-rendering');
     }
   }
   

3. 组件中使用封装服务
   主窗口和副窗口的组件直接注入该封装服务即可，状态会自动同步：

   import { Component } from '@angular/core';
   import { RenderingManagerService } from './rendering-manager.service';
   
   @Component({
     selector: 'app-status',
     template: `
       <button (click)="toggle()">
         {{ (isRunning$ | async) ? '停止' : '启动' }}渲染
       </button>
       <p>当前状态：{{ (isRunning$ | async) ? '运行中' : '已停止' }}</p>
     `
   })
   export class StatusComponent {
     isRunning$ = this.renderingManagerService.isRunning$;
   
     constructor(private renderingManagerService: RenderingManagerService) {}
   
     toggle(): void {
       this.renderingManagerService.toggle();
     }
   }
   

备选方案：渲染进程间直接IPC同步 #

如果不想把逻辑移到主进程，可以让主窗口的服务在状态变更时，通过IPC将新状态发送给其他窗口，其他窗口的服务更新自身状态。但这种方式需要处理窗口生命周期（如窗口关闭、新增），可靠性不如主进程单例方案。

示例（主窗口服务）：

toggle(): void {
  this.isRunning = !this.isRunning;
  this.isRunningSubject.next(this.isRunning);
  // 发送状态变更到其他窗口
  ipcRenderer.send('cross-window-rendering-state', this.isRunning);
}

示例（副窗口服务）：

constructor() {
  ipcRenderer.on('cross-window-rendering-state', (_event, state) => {
    this.isRunningSubject.next(state);
  });
}

总结 #

由于Electron多窗口的进程隔离特性，无法实现直接共享Angular的DI容器或服务实例。最可靠的方式是将共享状态的核心逻辑放在主进程单例管理，Angular侧通过IPC封装服务，模拟出“共享同一服务”的使用体验，确保所有窗口状态实时同步。

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