Electron 19与Angular 14间IPC通信故障求助

核心配置前提 #

Electron新版本默认开启contextIsolation且关闭nodeIntegration，这会导致渲染进程无法直接访问ipcRenderer。由于你无法使用contextBridge（serialport冲突），需在主进程创建窗口时显式配置：

// main.js 主进程代码
const { BrowserWindow, powerMonitor } = require('electron');
const usbDetection = require('usb-detection');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true, // 开启Node集成，允许渲染进程访问Electron API
      contextIsolation: false, // 关闭上下文隔离，避免ipcRenderer上下文不一致
      enableRemoteModule: false // 新版本不建议用remote，此处无需启用
    }
  });

  mainWindow.loadURL('http://localhost:4200'); // 替换为你的Angular项目地址
}

主进程主动触发事件至Angular #

1. 电源事件同步 #

// main.js 主进程监听电源事件并推送至渲染进程
powerMonitor.on('suspend', () => {
  if (mainWindow?.webContents) {
    mainWindow.webContents.send('power-event', { type: 'suspend' });
  }
});

powerMonitor.on('resume', () => {
  if (mainWindow?.webContents) {
    mainWindow.webContents.send('power-event', { type: 'resume' });
  }
});

2. USB事件同步 #

// main.js 主进程监听USB事件并推送至渲染进程
usbDetection.startMonitoring();

usbDetection.on('add', (device) => {
  if (mainWindow?.webContents) {
    mainWindow.webContents.send('usb-event', { type: 'add', device });
  }
});

usbDetection.on('remove', (device) => {
  if (mainWindow?.webContents) {
    mainWindow.webContents.send('usb-event', { type: 'remove', device });
  }
});

Angular端接收事件并实现双向通信 #

1. 正确监听主进程事件（解决之前事件不触发问题） #

之前的代码错误在于直接执行this.function()，需传递函数引用并绑定上下文：

// Angular组件/服务代码
import { ipcRenderer } from 'electron';
import { OnInit, OnDestroy } from '@angular/core';

export class AppComponent implements OnInit, OnDestroy {
  private powerEventListener: any;
  private usbEventListener: any;
  private mainReplyListener: any;

  ngOnInit(): void {
    // 监听电源事件
    this.powerEventListener = ipcRenderer.on('power-event', (_, data) => {
      console.log('电源事件:', data);
      // 此处处理业务逻辑
    });

    // 监听USB事件
    this.usbEventListener = ipcRenderer.on('usb-event', (_, data) => {
      console.log('USB事件:', data);
      // 此处处理业务逻辑
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时移除监听，避免内存泄漏
    ipcRenderer.removeListener('power-event', this.powerEventListener);
    ipcRenderer.removeListener('usb-event', this.usbEventListener);
    if (this.mainReplyListener) {
      ipcRenderer.removeListener('main-reply', this.mainReplyListener);
    }
  }
}

2. 双向通信：Angular主动发消息给主进程 #

// Angular组件中发送消息
sendMessageToMain(): void {
  ipcRenderer.send('renderer-request', { content: '请求主进程数据' });
}

// main.js 主进程监听渲染进程请求并回复
const { ipcMain } = require('electron');

ipcMain.on('renderer-request', (event, data) => {
  console.log('收到渲染进程请求:', data);
  // 处理逻辑后回复
  event.sender.send('main-reply', { content: '主进程返回数据' });
});

// Angular组件中监听主进程回复（可加入ngOnInit）
this.mainReplyListener = ipcRenderer.on('main-reply', (_, data) => {
  console.log('主进程回复:', data);
});

关键问题复盘 #

• 之前事件不触发的核心原因：
  1. 未关闭contextIsolation，导致渲染进程与主进程的ipc上下文隔离
  2. 监听事件时错误传递this.function()（立即执行函数），而非函数引用
• 需确保mainWindow全局引用有效，避免窗口未初始化时调用webContents.send

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