如何在Electron应用中通过系统托盘菜单实现路由页面导航

核心逻辑是通过Electron的IPC通信打通主进程（托盘运行环境）和渲染进程（Angular运行环境），托盘点击时发消息给Angular端，Angular端调用原生路由接口完成跳转。 #

1. 主进程修改：扩展托盘菜单+发送IPC消息 #

直接修改你现有的托盘初始化代码，把三个路由对应的菜单项加进去，点击时先唤起窗口，再给渲染进程发跳转指令：

// 路由配置和Angular端保持一致即可
const NAV_ROUTES = [
  { path: '/devices', label: '设备管理' },
  { path: '/documents', label: '文档中心' },
  { path: '/users', label: '用户管理' }
]

tray = new Tray(__dirname + '/src/logo.ico')
tray.setToolTip("my-app")

const menuTemplate = [
  {
    label: '显示应用',
    click: () => mainWindow.show()
  },
  { type: 'separator' },
  // 批量生成路由菜单项
  ...NAV_ROUTES.map(route => ({
    label: route.label,
    click: () => {
      // 窗口最小化/隐藏时先唤起并聚焦，保证用户能看到跳转结果
      mainWindow.show()
      mainWindow.focus()
      // 发送跳转消息，携带目标路由路径
      mainWindow.webContents.send('tray-navigate', route.path)
    }
  })),
  { type: 'separator' },
  {
    label: '退出应用',
    click: () => {
      quiting = true
      app.quit()
    }
  }
]

tray.setContextMenu(Menu.buildFromTemplate(menuTemplate))
tray.on('double-click', () => mainWindow.show())

改完之后托盘菜单的效果和预期结构一致，三个导航项在显示、退出之间，用分隔线区隔，参考效果：
#

2. 渲染进程修改：Angular端监听消息执行路由跳转 #

安全配置说明 #

Electron 12+ 版本默认开启contextIsolation（上下文隔离），不允许渲染进程直接引用Node.js/Electron API，推荐用preload脚本做安全暴露：

1. 先写preload脚本（如果项目里已经有就直接加方法）：

// preload.js
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
  // 暴露监听托盘跳转事件的方法
  onTrayNavigate: (callback) => ipcRenderer.on('tray-navigate', callback)
})

2. 确认主进程创建BrowserWindow的时候加载了这个preload脚本：

mainWindow = new BrowserWindow({
  width: 1200,
  height: 800,
  webPreferences: {
    preload: __dirname + '/preload.js', // 路径改成你自己的preload文件实际路径
    contextIsolation: true, // 默认就是true，不要关闭
    nodeIntegration: false // 保持false避免安全风险
  }
})

Angular端代码修改 #

在根组件app.component.ts里监听IPC消息，调用Router跳转，这个组件随应用启动常驻，不会因为路由切换被销毁，适合放全局监听逻辑：

import { Component, OnInit } from '@angular/core'
import { Router } from '@angular/router'

// 声明window上挂载的electronAPI类型，避免TS报错
declare global {
  interface Window {
    electronAPI?: {
      onTrayNavigate: (cb: (event: any, path: string) => void) => void
    }
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    // 没拿到electronAPI说明是浏览器环境运行，直接跳过
    if (!window.electronAPI) return

    window.electronAPI.onTrayNavigate((_, targetPath) => {
      // 避免重复跳转同路由抛错
      if (this.router.url !== targetPath) {
        this.router.navigateByUrl(targetPath)
      }
    })
  }
}

常见踩坑点 #

• 如果你的项目没开上下文隔离、开了nodeIntegration，不需要写preload，直接在Angular里const { ipcRenderer } = window.require('electron')，然后用ipcRenderer.on监听即可，但非常不推荐这种配置，有安全隐患。
• 菜单项的label文字可以根据需求随便改，只要path和Angular路由配置里的path完全一致就不会跳转失败。
• 如果跳转后窗口没激活，记得检查click事件里有没有加mainWindow.focus()。

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