如何将Electron ipcRenderer集成到基于TypeScript的Angular 2应用程序中？

Question

我想在我的项目中使用ipcMain/ipcRenderer从Angular到Electron并返回.

电子方面很清楚:

const
  electron = require('electron'),
  ipcMain = electron.ipcMain,
;

ipcMain.on('asynchronous-message', function(event, arg) {
  console.debug('ipc.async', arg);
  event.sender.send('asynchronous-reply', 'async-pong');
});

ipcMain.on('synchronous-message', function(event, arg) {
  console.debug('ipc.sync', arg);
  event.returnValue = 'sync-pong';
});

但我不知道如何将Electron模块集成到我的Angular 2应用程序中.我使用SystemJS作为模块加载器,但我是一个新手.

任何帮助赞赏.谢谢.

---马里奥

Answer 1

有冲突,因为Electron使用commonjs模块解析,但你的代码已经用systemjs规则编译.

两种解决方案

健壮的方式.注册对象require返回:

<script>
    System.set('electron', System.newModule(require('electron')));
</script>

这是最好的,因为renderer/init.js脚本在启动时加载该模块.SystemJS必须只接受它,而不是加载.

替代方式.声明使用脏技巧.

获取电子实例index.html:

<script>
    var electron = require('electron');
</script>

以typescript这种方式在文件中声明它:

declare var electron: any;

自由使用)

electron.ipcRenderer.send(...)

Answer 2

最近的一个包叫做ngx-electron了这个很容易.链接到repo并链接到文章

SRC /应用程序/ app.module.ts

import { NgxElectronModule } from 'ngx-electron';
// other imports 
@NgModule({
  imports: [NgxElectronModule],
  ...
})

SRC /应用程序/ your.component.ts

import { Component, NgZone } from '@angular/core';
import { ElectronService } from 'ngx-electron';

@Component({
  selector: 'app-your',
  templateUrl: 'your.component.html'
})
export class YourComponent {
    message: string;        

    constructor(private _electronService: ElectronService, private _ngZone: NgZone) { 
        this._electronService.ipcRenderer.on('asynchronous-reply', (event, arg) => {
            this._ngZone.run(() => {
                let reply = `Asynchronous message reply: ${arg}`;
                this.message = reply;
            });
        }
    }

    playPingPong() {
        this._electronService.ipcRenderer.send('asynchronous-message', 'ping');
    }
}

注意:NgZone使用因为this.message在Angular的区域之外异步更新.文章