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();

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

为什么会这样？如果出现问题，如何在ts文件中进行require操作。

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

Answer 1

调用ipcMain不起作用，因为您不在main（即电子版代码，电子index.js文件上），您的在renderer（网页）上。因此，您必须使用ipcRenderer代替，import已使用app.ts文件顶部的es6 import {remote, ipcRenderer} from 'electron';语法导入。如果你想用电子ipcMain制作东西，必须从电子代码方面完成。

{{1}}

Electron ipc notes：

ipcMain 从主进程异步通信到呈现器进程。

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

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

1 个答案: