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

Question

我已经设置了一个 angular2 / Electron 应用程序，类似于此视频中的解释：https://www.youtube.com/watch?v=pLPCuFFeKOU. The project I am basing my code on can be found here : 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 在这里不起作用，不知何故我需要使用 import 语句而不是我的 ts 文件？如果是这种情况，我该如何使用导入来获取 ipcMain 对象和我的 xml2js 等？

为什么会这样？如果这是问题所在，我怎样才能使 require 在 ts 文件中工作。

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

Answer 1

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

import {remote, ipcRenderer} from 'electron';

Electron ipc notes:

ipcMain Communicate asynchronously from the main process to renderer processes.

ipcRenderer Communicate asynchronously from a renderer process to the main process.

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

Angular2 / Electron application using electron API within the angular2 ts files

javascript

node.js

electron

angular