在 angular2 ts 文件中使用电子 API 的 Angular2 / Electron 应用程序

Question

我已经设置了一个 angular2 / Electron 应用程序，类似于此视频中的说明：https://www.youtube.com/watch?v=pLPCuFFeKOU。我的代码所基于的项目可以在这里找到：https://github.com/rajayogan/angular2-desktop

我收到错误：

app.ts:16Uncaught TypeError: Cannot read property 'on' of undefined

当我尝试运行这段代码时：

import { bootstrap } from '@angular/platform-browser-dynamic';
import { Component } from '@angular/core';
import { MenuComponent} from './menu';
import { ConfigEditorComponent } from './config-editor';
import { remote, ipcRenderer} from 'electron';

let {dialog} = remote;

//Functions used for select server xml callbacks.
const ipc = require('electron').ipcMain
const xml2js = require('xml2js')
  const fs = require('fs')
var parser = new xml2js.Parser();

ipc.on('open-file-dialog', function (event) {
  dialog.showOpenDialog({
    title:"Select zOS Connect server.xml",
    properties: ['openFile', 'openDirectory'],
    filters: [
      {name: 'XML', extensions: ['xml']},
      {name: 'All Files', extensions: ['*']}
     ]
  }, function (files) {
    if (files){
      fs.readFile(files[0], function(err, data) {
        parser.parseString(data, function (err, result) {
          console.dir(result);
          process_server_xml(event,result);
        })
      })
    }
  })
  })

function process_server_xml(event,json){
  console.log("oh hello!")
  event.sender.send('selected-directory', json)
  console.log("oh im done!")
}



@Component({
    selector: 'connect-toolkit',
    templateUrl: 'app.component.html',
    directives: [ MenuComponent, ConfigEditorComponent ]
})

export class AppComponent {

    constructor() {

        var menu = remote.Menu.buildFromTemplate([{
            label: 'Raja',
            submenu: [
                {
                    label: 'open',
                    click: function(){
                      dialog.showOpenDialog((cb) => {

                      })  
                    }
                },
                {
                    label: 'opencustom',
                    click: function(){
                      ipcRenderer.send('open-custom');
                          let notification = new Notification('Customdialog', {
                              body: 'This is a custom window created by us'
                          })

                    }
                }
            ]
        }])
        remote.Menu.setApplicationMenu(menu);
    }

}

bootstrap(AppComponent);

我认为问题可能是：

const ipc = require('electron').ipcMain
    const xml2js = require('xml2js')
      const fs = require('fs')
    var parser = new xml2js.Parser();

是否有可能 require 在这里不起作用，并且不知何故我需要从我的 ts 文件中使用 import 语句？如果是这种情况，我该如何使用导入来获取 ipcMain 对象和我的 xml2js 等？

为什么会这样？如果这是问题，我如何在 ts 文件中进行 require 工作。

请注意，如果我删除了 require 行，并且所有 ipc.on 代码一切都按预期运行并且工作正常（除了从未收到 ipc 事件的事实；）

Answer 1

调用ipcMain 不起作用，因为您不在main 上（即电子侧代码，在电子index.js 文件上），您在renderer（网页）上。因此，您必须改用 ipcRenderer，它已经在 app.ts 文件的顶部使用 es6 import 语法导入。而如果你想使用 electron ipcMain 做一些东西，它必须从电子代码端完成。

import {remote, ipcRenderer} from 'electron';

电子 ipc 笔记：

ipcMain 从主进程异步通信到渲染器进程。

ipcRenderer 从渲染器进程异步通信到主进程。