如何使用Electron菜单执行Angular 7导航

Question

我正在使用 Angular 5.2.11 和 Electron 版本 3.0.7，试图使用 Electron 菜单导航到一个 Angular 5 组件。当我点击 Electron 菜单时，它会导航到该页面，但我的组件只执行构造函数，而没有任何 Angular 生命周期钩子的执行，直到我在 Electron 窗口中点击。然后页面加载并正常工作。

menu.js 文件：

const { Menu } = require('electron');
const menuTemplate = [
      label: 'Maintenance',
      submenu: [
          {
              label: 'Sar Maintenance',
          }
      ];

menu = Menu.buildFromTemplate(menuTemplate);    
Menu.setApplicationMenu(menu);

exports.ApplicationMenu = menu;

index.ts文件：

const { app } = require('electron');
const BrowserWindow = require('electron').BrowserWindow

let ipcm = require('electron').ipcMain;
let appmenu = require('./menu.js');
let menu = appmenu.ApplicationMenu;
let mainWindow;

function createMainWindow () {
    mainWindow = new BrowserWindow({width:  800, height: 800});
    mainWindow.loadURL(`file://${__dirname}/index.html`);

    menu.items[1].click = () => {    // Sar Mainenance
        mainWindow.webContents.send('goto-sar', 'sarArg');
    }

    mainWindow.on('closed', () => {
        mainWindow = null
    });
}

app.on('ready', createMainWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    createMainWindow()
  }
})

ipcm.on('page-nav-complete', () => {
    console.log('NavComplete');
    app.focus();
});

Angular app.component.ts:

let ipcRenderer = require('electron').ipcRenderer;
app.component.ts constructor:

ipcRenderer.on('goto-sar', function(sender, arg) {
  this.openSar();
});

app.component.ts中的Angular方法:

openSar () {
    this._router.navigate(['/sargen']);
    ipcRenderer.send('page-nav-complete');
}

似乎主窗口没有获得焦点？我做错了什么吗？

- Doug

---

标题表明这是一个Angular 7的解决方案，但您的问题涉及Angular 5。您能澄清一下吗？ - laurentIsRunning

Answer 1

您需要使用NgZone.run()。了解更多信息，请访问Angular NgZone。这就是我在Electron中使Angular与ipcRenderer内的路由导航工作所必须做的。

示例

import { OnInit, NgZone } from '@angular/core';
let ipcRenderer = require('electron').ipcRenderer;

export class MyComponent implements OnInit {

    constructor(private ngZone: NgZone) { }

    ngOnInit() {
        ipcRenderer.on('goto-sar', (event, arg) => {
            this.ngZone.run(() => {
                this.openSar();
            });
        });
    }

}

- Oen44

---

对我来说，你的解决方案不起作用，我收到以下错误：**在...中找不到模块：错误：无法解析'fs'**。我使用Angular 7。 - laurentIsRunning

@laurentIsRunning 这与我的回答或这个问题无关，你试图使用 fs，它可能是文件系统，但你没有安装该模块。如果你需要进一步的帮助，请提出具体的问题。 - Oen44

@Oen44，感谢您的反馈。我已安装了这个软件包，并且electron模块已经引用它。我认为自从Angular 6 ng build不允许引用fs后...所以我觉得这似乎与问题或您的答案有关。 - laurentIsRunning

@laurentIsRunning 这个问题与你遇到的错误无关。如果你在兼容性方面遇到问题，请升级到Angular 7。我已经使用electron和Angular 7工作过，没有任何问题。 - Oen44

@Oen44，感谢您的回答。我实际上正在使用最新版本的Angular，并且在尝试使用ipcrenderer时遇到了这个问题。那么我将在stackoverflow上开一个新的问题。 - laurentIsRunning