无父子关系组件间Angular共享服务失效问题排查及替代方案

我开发了一个基于Electron+Angular的桌面应用，Electron可视为Chromium浏览器，Angular应用运行在其桌面窗口中。

App组件包含输入框和确定按钮，点击按钮后，我通过Electron直接加载prompt-reason组件（类似在浏览器中访问localhost:4200/promptInput）。我希望将App组件的输入内容传递给prompt-reason组件，因此编写了以下两个DataService，但均未生效，不清楚原因是什么，同时想了解是否有其他数据传递方案？

现有代码 #

DataService 1 #

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

@Injectable({
  providedIn: 'root',
})
export class DataService {
  private message: string = '';

  constructor() {}

  changeMessage(newMessage: string) {
    this.message = newMessage;
  }
  getMessage(): string {
    return this.message;
  }
}

DataService 2 #

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  // Use BehaviorSubject to handle the data and allow components to subscribe to changes
  private dataSource = new BehaviorSubject<any>(null);

  // Expose the BehaviorSubject as an Observable for components to consume
  currentData: Observable<any> = this.dataSource.asObservable();

  constructor() {}

  changeData(data: any): void {
    this.dataSource.next(data);
  }

  getCurrentData(): any {
    return this.dataSource.value;
  }
}

为什么现有Service无效？ #

你通过Electron加载新窗口的方式本质上是创建了全新的Angular应用实例，两个窗口的Angular运行环境完全独立。providedIn: 'root'的服务仅存在于各自实例的内存中，不管是普通变量还是BehaviorSubject，都仅限于当前窗口的上下文，新窗口的Service会重新初始化，自然拿不到之前的数据。

可行的数据传递方案 #

1. Electron IPC进程通信 #

利用Electron的主进程-渲染进程通信机制，实现跨窗口数据传递：

• 原窗口（App组件）发送数据到主进程：

// App组件内
import { ipcRenderer } from 'electron';

onSubmit() {
  const inputValue = this.inputControl.value;
  ipcRenderer.send('pass-input-data', inputValue);
}

• 主进程监听并转发给新窗口：

// main.js
const { ipcMain, BrowserWindow } = require('electron');

let promptWindow;

ipcMain.on('pass-input-data', (event, data) => {
  if (promptWindow) {
    promptWindow.webContents.send('receive-input-data', data);
  } else {
    promptWindow = new BrowserWindow({ /* 窗口配置参数 */ });
    promptWindow.loadURL('localhost:4200/promptInput');
    promptWindow.webContents.on('did-finish-load', () => {
      promptWindow.webContents.send('receive-input-data', data);
    });
  }
});

• 新窗口（prompt-reason组件）接收数据：

// prompt-reason组件内
import { ipcRenderer } from 'electron';
import { OnInit } from '@angular/core';

ngOnInit() {
  ipcRenderer.on('receive-input-data', (event, data) => {
    this.receivedData = data;
    // 后续数据处理逻辑
  });
}

2. URL参数传递 #

如果数据是简单字符串，可在打开新窗口时拼接URL参数：

// App组件内打开新窗口
const inputValue = encodeURIComponent(this.inputControl.value);
window.open(`localhost:4200/promptInput?data=${inputValue}`);

在prompt-reason组件中读取参数：

// prompt-reason组件内
import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    const receivedData = decodeURIComponent(params['data']);
    // 数据处理逻辑
  });
}

注意：仅适合小体积、非敏感数据，数据过长或含特殊字符可能出现异常。

3. 本地存储（LocalStorage/SessionStorage） #

将数据存入浏览器本地存储，新窗口直接读取：

// App组件内存储数据
localStorage.setItem('inputData', this.inputControl.value);
// prompt-reason组件内读取数据
const receivedData = localStorage.getItem('inputData');
// 用完可删除避免残留
localStorage.removeItem('inputData');

缺点：数据存在本地有安全风险，多窗口同时操作可能出现冲突。

4. 改为Angular路由跳转（同实例内） #

如果可以避免Electron新开窗口，改用Angular路由跳转，原BehaviorSubject方案即可生效：

// App组件内跳转
import { Router } from '@angular/router';
import { DataService } from './data.service';

constructor(private router: Router, private dataService: DataService) {}

onSubmit() {
  this.dataService.changeData(this.inputControl.value);
  this.router.navigate(['/promptInput']);
}

prompt-reason组件订阅数据：

// prompt-reason组件内
import { DataService } from './data.service';

constructor(private dataService: DataService) {}

ngOnInit() {
  this.dataService.currentData.subscribe(data => {
    if (data) {
      this.receivedData = data;
    }
  });
}

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