如何从Electron主进程main.ts向Angular组件发送消息

嘿，我来帮你搞定Electron主进程给Angular发消息更新GUI的事儿！你已经会从Angular往主进程发消息了，反过来其实逻辑很清晰——核心就是利用Electron的IPC机制，让主进程主动把处理结果推送给渲染进程（也就是你的Angular应用），然后在Angular里监听这些消息，再联动你的EventEmitter更新界面就行。下面给你几种实用的实现方式：

主进程（main.ts）里，当视频处理完成后，你只需要拿到目标窗口的webContents实例，调用它的send方法就能把消息和参数发给Angular。

// main.ts
import { app, BrowserWindow, ipcMain } from 'electron';
import * as path from 'path';

let mainWindow: BrowserWindow | null;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1000,
    height: 700,
    webPreferences: {
      // 如果你用的是旧项目，可能开了这个；新项目更推荐用下面的preload方式
      nodeIntegration: true,
      contextIsolation: false,
    }
  });

  // 加载Angular应用（开发环境用localhost，打包后用本地文件）
  mainWindow.loadURL('http://localhost:4200');
}

// 模拟视频处理函数
async function processVideo(filePath: string) {
  // 这里替换成你的实际视频处理逻辑
  await new Promise(resolve => setTimeout(resolve, 3000));
  
  // 处理完成后生成结果
  const processingResult = {
    success: true,
    outputPath: path.join(app.getPath('downloads'), 'processed-video.mp4'),
    duration: 150
  };

  // 给Angular发送消息
  if (mainWindow) {
    mainWindow.webContents.send('video-processing-done', processingResult);
  }
}

app.whenReady().then(createWindow);

然后在Angular组件里，用ipcRenderer监听这个事件，再触发你的EventEmitter：

// video-handler.component.ts
import { Component, EventEmitter, OnInit, Output, OnDestroy } from '@angular/core';
const { ipcRenderer } = window.require('electron');

@Component({
  selector: 'app-video-handler',
  templateUrl: './video-handler.component.html',
  styleUrls: ['./video-handler.component.css']
})
export class VideoHandlerComponent implements OnInit, OnDestroy {
  @Output() videoProcessed = new EventEmitter<any>(); // 你的自定义EventEmitter

  ngOnInit(): void {
    // 监听主进程发来的完成消息
    ipcRenderer.on('video-processing-done', (_, result) => {
      console.log('收到处理结果:', result);
      // 触发EventEmitter，更新GUI
      this.videoProcessed.emit(result);
    });
  }

  // 组件销毁时移除监听，防止内存泄漏
  ngOnDestroy(): void {
    ipcRenderer.removeAllListeners('video-processing-done');
  }
}

在Angular模板里就可以用这个EventEmitter来更新界面了：

<!-- video-handler.component.html -->
<div class="result-card" *ngIf="processedResult">
  <h3>视频处理完成！</h3>
  <p>输出路径：{{ processedResult.outputPath }}</p>
  <p>视频时长：{{ processedResult.duration }}秒</p>
</div>

如果你的Electron版本较新，推荐开启contextIsolation和sandbox来保证安全性，这时候不能直接在Angular里调用ipcRenderer，需要通过preload脚本暴露API。

首先写preload.js（或preload.ts）：

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

// 向Angular暴露安全的API
contextBridge.exposeInMainWorld('electronIPC', {
  onVideoProcessComplete: (callback) => {
    ipcRenderer.on('video-processing-done', (_, result) => callback(result));
  },
  // 可选：暴露移除监听的方法
  removeVideoProcessListener: () => {
    ipcRenderer.removeAllListeners('video-processing-done');
  }
});

然后修改main.ts里的窗口配置：

// main.ts
webPreferences: {
  nodeIntegration: false,
  contextIsolation: true,
  sandbox: true,
  preload: path.join(__dirname, 'preload.js') // 指定preload脚本路径
}

最后在Angular组件里使用这个暴露的API：

// video-handler.component.ts
import { Component, EventEmitter, OnInit, Output, OnDestroy } from '@angular/core';

// 定义全局类型，避免TypeScript报错
declare global {
  interface Window {
    electronIPC: {
      onVideoProcessComplete: (callback: (result: any) => void) => void;
      removeVideoProcessListener: () => void;
    };
  }
}

@Component({
  selector: 'app-video-handler',
  templateUrl: './video-handler.component.html',
  styleUrls: ['./video-handler.component.css']
})
export class VideoHandlerComponent implements OnInit, OnDestroy {
  @Output() videoProcessed = new EventEmitter<any>();

  ngOnInit(): void {
    window.electronIPC.onVideoProcessComplete((result) => {
      this.videoProcessed.emit(result);
    });
  }

  ngOnDestroy(): void {
    window.electronIPC.removeVideoProcessListener();
  }
}

如果是Angular先发起视频处理请求，主进程处理完再回复结果，用ipcMain.handle和ipcRenderer.invoke更合适，这种方式是Promise-based的，代码更简洁：

主进程main.ts：

ipcMain.handle('request-video-processing', async (_, filePath) => {
  // 执行视频处理逻辑
  await new Promise(resolve => setTimeout(resolve, 3000));
  return {
    success: true,
    outputPath: path.join(app.getPath('downloads'), 'processed-video.mp4')
  };
});

Preload脚本里添加对应的API：

contextBridge.exposeInMainWorld('electronIPC', {
  processVideo: (filePath: string) => ipcRenderer.invoke('request-video-processing', filePath)
});

Angular组件里调用：

async startProcessing(filePath: string) {
  try {
    const result = await window.electronIPC.processVideo(filePath);
    this.videoProcessed.emit(result);
  } catch (error) {
    console.error('处理失败:', error);
  }
}

• 一定要在组件销毁时移除IPC监听，避免内存泄漏，尤其是长期运行的应用。
• 如果有多个窗口，要确保主进程把消息发送到正确的窗口实例。
• 可以定义TypeScript接口来规范消息结构，比如interface VideoProcessingResult { success: boolean; outputPath: string; duration?: number }，在主进程和Angular里复用，保证类型安全。

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