在angular2 ts文件中使用电子API进行Angular2 / Electron应用 [英] Angular2 / Electron application using electron API within the angular2 ts files

问题描述

我已经安装了与该视频中的解释类似的angular2 / Electron应用程序： https：// www.youtube.com/watch?v=pLPCuFFeKOU 。我基于我的代码的项目可以在这里找到： https://github.com/rajayogan/angular2-桌面

I have setup an angular2 / Electron app similar to the explanation in this video : 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

的属性 on代码：

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等？

Is it possible require doesn't work here, and somehow I need to use import statements instead from my ts files? If this is the case how do I use the import in order to get the ipcMain object and my xml2js etc?

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

Why would that be the case? How can I make require work within the ts files if this is the problem.

请注意，如果我删除了require行以及所有ipc.on代码，则所有内容都将以预期的并且工作正常（除了从未收到ipc事件的事实；）

Note that if I remove the require lines, and all the ipc.on code everything runs as expected and works fine (other than the fact that the ipc event is never received ;)

推荐答案

调用 ipcMain 不起作用，因为您不在 main 上（即，电子侧代码位于电子上） index.js 文件），则您位于渲染器（网页）上。因此，您必须使用 ipcRenderer 代替，它已经使用es6 import 语法在 app.ts 文件。而且，如果您想使用电子ipcMain进行制造，则必须从电子代码方面完成。

Calling ipcMain doesn't work because you're not on main (i.e., the electron side code, which is on electron index.js file), your are on renderer (web page). Therefore you must use ipcRenderer instead, which is already imported using es6 import syntax on top of your app.ts file. And if you want to make something using electron ipcMain, it have to be done from the electron code side.

import {remote, ipcRenderer} from 'electron';

电子ipc注释：

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

ipcMain Communicate asynchronously from the main process to renderer processes.

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

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

这篇关于在angular2 ts文件中使用电子API进行Angular2 / Electron应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！