【问题标题】:How to use Electron menu to execute angular 7 navigation如何使用 Electron 菜单执行 Angular 7 导航
【发布时间】:2019-04-30 13:58:02
【问题描述】:

我正在使用 angular 5.2.11 和选举版本 3.0.7,并尝试使用 Electron 菜单导航到 angular 5 组件。当我点击电子菜单时,它导航到页面,但我的组件只执行构造函数,而不是任何角度生命周期钩子,直到我点击电子窗口。然后页面加载并按预期工作。

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 中的角度方法:

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

似乎 mainWindow 没有获得焦点?我做错了什么?

【问题讨论】:

  • 标题表明它是 Angular 7 的解决方案,但你的问题是关于 Angular 5。你能澄清一下吗?

标签: javascript angular electron angular7


【解决方案1】:

您必须使用NgZone.run()。更多在这里-Angular NgZone。这就是使 Angular 与 Electron 一起工作并在 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();
            });
        });
    }

}

【讨论】:

  • 谢谢。像魅力一样工作。几个月来我一直在寻找答案。
  • 对我来说,您的解决方案不起作用,我收到以下错误:Module not found: Error: Can't resolve 'fs' in ...。我使用 Angular 7。
  • @laurentIsRunning 这与我的回答或这个问题无关,您正在尝试使用可能是 FileSystem 的fs 并且您没有安装该模块。如果您需要进一步的帮助,请提出具体问题。
  • @Oen44 感谢您的反馈。我安装了这个包,它被电子模块引用。我认为由于 Angular 6 ng build 不允许引用 fs... 所以在我看来这与问题或您的答案有关。
  • @laurentIsRunning 这个问题与您遇到的错误无关。如果您遇到兼容性问题,请更新到 Angular 7。我使用电子和 Angular 7 没有任何问题。
猜你喜欢
  • 2019-06-08
  • 2011-10-03
  • 2020-09-23
  • 2013-07-13
  • 2019-08-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多