如何在Ionic 8/Capacitor 5 Electron中打开内部路由新窗口？

要在Electron环境中打开内部Angular路由的新窗口，不能直接照搬PWA的window.open方式，需要结合Electron的IPC通信和主进程创建窗口的能力来实现，具体步骤如下：

1. 配置Electron主进程的IPC监听 #

找到Electron主进程文件（通常为electron/src/index.ts），添加以下代码，监听来自渲染进程的窗口创建请求：

import { app, BrowserWindow, ipcMain } from 'electron';
import * as path from 'path';

// ... 原有代码 ...

app.whenReady().then(() => {
  // ... 原有窗口初始化代码 ...

  // 监听打开新窗口的IPC事件
  ipcMain.on('open-in-new-window', (event, routePath) => {
    const newWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
        nodeIntegration: false,
        contextIsolation: true,
        enableRemoteModule: false,
        preload: path.join(__dirname, 'preload.js')
      }
    });

    // 基于Capacitor Electron的基础URL拼接目标路由
    const baseUrl = 'app://./';
    const fullUrl = new URL(routePath, baseUrl).href;
    newWindow.loadURL(fullUrl);

    // 窗口关闭时销毁实例释放资源
    newWindow.on('closed', () => {
      newWindow.destroy();
    });
  });
});

2. 编写预加载脚本暴露IPC方法 #

在electron/src/preload.js中添加代码，将Electron的IPC方法安全暴露给Angular渲染进程：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  openInNewWindow: (routePath) => ipcRenderer.send('open-in-new-window', routePath)
});

3. 在Angular组件中调用方法打开新窗口 #

在需要触发新窗口的Angular组件里，声明全局window对象的扩展类型，然后调用暴露的API：

import { Component } from '@angular/core';

// 扩展window类型，避免TypeScript报错
declare global {
  interface Window {
    electronAPI: {
      openInNewWindow: (routePath: string) => void;
    };
  }
}

@Component({
  selector: 'app-form-launcher',
  templateUrl: './form-launcher.component.html',
  styleUrls: ['./form-launcher.component.scss']
})
export class FormLauncherComponent {
  openForm(formId: string) {
    // 传入目标路由路径，比如/form/111
    window.electronAPI.openInNewWindow(`/form/${formId}`);
  }
}

关键说明 #

• Capacitor Electron的应用基础URL为app://./，以此拼接内部路由可以确保Electron加载正确的Angular页面。
• 保持Electron的contextIsolation开启、nodeIntegration关闭是安全最佳实践，避免渲染进程直接访问Node.js API。

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