如何在Angular+Electron的Electron部分复用ngx-translate翻译资源？

核心思路 #

复用Angular项目中ngx-translate的JSON资源文件，让Electron主进程直接读取这些文件，同时同步Angular的语言切换状态到Electron主进程，实现菜单文本的动态更新。

1. 让Electron主进程访问翻译资源文件 #

假设你的翻译文件（如en.json、zh.json）存放在Angular项目的assets/i18n目录下，在Electron主进程文件（main.js/main.ts）中通过路径拼接读取文件：

const path = require('path');
const fs = require('fs');
const app = require('electron').app;

// 获取翻译文件的绝对路径
const getTranslationFilePath = (lang) => {
  // 替换为你的Angular打包后目录名
  return path.join(app.getAppPath(), 'dist/your-angular-project/assets/i18n', `${lang}.json`);
};

// 加载指定语言的翻译内容
const loadTranslations = (lang) => {
  const filePath = getTranslationFilePath(lang);
  try {
    const rawData = fs.readFileSync(filePath, 'utf8');
    return JSON.parse(rawData);
  } catch (err) {
    console.error('加载翻译文件失败:', err);
    return {};
  }
};

2. 基于翻译内容构建Electron菜单 #

在主进程中先加载默认语言的翻译数据，再用翻译键对应的值生成菜单：

const { Menu } = require('electron');
let currentTranslations = loadTranslations('en'); // 默认语言设为英文

const createAppMenu = () => {
  const menuTemplate = [
    {
      label: currentTranslations['menu.file'] || 'File',
      submenu: [
        { label: currentTranslations['menu.file.new'] || 'New', click: () => {} },
        { label: currentTranslations['menu.file.open'] || 'Open', click: () => {} },
        { type: 'separator' },
        { label: currentTranslations['menu.file.exit'] || 'Exit', role: 'quit' }
      ]
    },
    {
      label: currentTranslations['menu.edit'] || 'Edit',
      submenu: [
        { role: 'undo' },
        { role: 'redo' },
        { type: 'separator' },
        { role: 'cut' },
        { role: 'copy' },
        { role: 'paste' }
      ]
    }
  ];

  const appMenu = Menu.buildFromTemplate(menuTemplate);
  Menu.setApplicationMenu(appMenu);
};

// 应用启动时初始化菜单
app.whenReady().then(createAppMenu);

3. 同步Angular的语言切换到Electron主进程 #

在Angular的语言切换逻辑中，通过Electron的ipcRenderer向主进程发送语言变更通知：

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-language-switcher',
  template: `<button (click)="switchLang('en')">English</button> <button (click)="switchLang('zh')">中文</button>`
})
export class LanguageSwitcherComponent {
  private ipcRenderer = window.require('electron').ipcRenderer;

  constructor(private translate: TranslateService) {}

  switchLang(lang: string) {
    this.translate.use(lang);
    // 通知主进程切换语言
    this.ipcRenderer.send('language-updated', lang);
  }
}

在Electron主进程中监听该事件，重新加载翻译并更新菜单：

const { ipcMain } = require('electron');

ipcMain.on('language-updated', (event, lang) => {
  currentTranslations = loadTranslations(lang);
  createAppMenu(); // 重新构建菜单实现文本更新
});

4. 适配开发/生产环境路径差异 #

开发环境下Angular资源文件未打包到dist目录，可借助electron-is-dev判断环境：

const isDev = require('electron-is-dev');

const getTranslationFilePath = (lang) => {
  let basePath;
  if (isDev) {
    basePath = path.join(app.getAppPath(), 'src/assets/i18n');
  } else {
    basePath = path.join(app.getAppPath(), 'dist/your-angular-project/assets/i18n');
  }
  return path.join(basePath, `${lang}.json`);
};

需先安装依赖：npm install electron-is-dev --save

额外优化 #

• 封装翻译工具函数，处理键不存在的默认值：

  const t = (key) => currentTranslations[key] || key;
  // 使用示例：label: t('menu.file')
  

• 缓存已加载的翻译内容，避免重复读取文件。

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